Context: I am doing a mobile web project for one of my clients.

Problem screenshot

Problem description

When using DIV with background image that is the same height as the DIV and top pixels of the background image are transparent, with repeat-x (or no repeat) there is an observable line at the top of the div painted with the color of the bottom pixel of the image.

Suspected buggy mechanism

I suppose it’s subpixel smoothing. Because of the observed facts:

• The additional lines is less than a pixel wide as seen when zooming
• Pixels affect colors of neighbours pixels

Suggested solution

• Add two pixels at the bottom of the background image: one of the same color as the last pixel and one transparent. For example, if original image is from top to bottom (transparent,…,transparent,red,green,blue) it should become (transparent,…,transparent,red,green,blue,blue,transparent).
• Keep the DIV vertical size the same as the original background: the two new pixels should be “rendered” outside the DIV.

Initially I’ve added only the transparent pixel at the very bottom but it interacted badly with both the last visible pixel and the contents of the div (not shown in the example, for simplicity).

I have created a Gist that shows the problem and the suggested solution. The Gist also includes the half-solution of only adding one pixel. For your convenience I have also uploaded the HTML of the problem and the suggested solution to this blog.

Additional info

• On some devices, when going to landscape mode, the line disappears and is only observable when zooming in

P.S.
I learned something the hard way but I hope you will find this post and it will save you something from 1 to 5 hours of work.