Bitmap with 2 frames issue


I have the following bitmap with 2 frames:
The bitmap has a size of 26x52 (2 frames each 26x26).

If I use this bitmap with an OnOff button and set the “size” to 26, 26, I end up with the following rendered button
As you can see there is a thin line at the very bottom which seems to be coming from the next frame (if you look at the original file, there is no bleeding: frame 2 does not “bleed” into frame 1 so I don’t think it is user error).

If on the other end, I define a 2x scaled bitmap (size is 52x104) and declare it with a scale-factor 2 in the xml file, as you can see the thin line does not show up.
Any idea why this is happening? I am definitely not expecting this behavior.


I have not checked the code for my theory but this is what I think is happening:

  • because I am on macOS with HiDPI screen and I don’t provide a 2x version of the image, the original image (which contains 2 frames) is scaled up.

  • the process of scaling the image up introduces artifacts which ends up having frame 2 “bleeding” into frame 1

For the sake of demonstrating what I am talking about, I took my original image and scaled it up (using Preview -> Image Size -> 200%) and this is the result

If you zoom in very closely in the image you can see that line 52 (which is part of frame 1) ends up with some anti-alias border from frame 2 which translates into the thin line being displayed.


You can play with the bitmap interpolation quality if you can get rid of this artifact: