Bite-sized CSS & HTML nuggets

Prevent background-color bleed on touch screens

Here’s an issue I’ve ran into a couple of times related to subpixel rounding on touch screens: while zooming in, I was seeing background colors bleeding through on the edges of an element that also had a background image applied. Open this fiddle on your smartphone or tablet and zoom in, you may see something like this:

Browsing this thread on Stack Overflow I found a really simple workaround that may not work in every situation, but it did the trick for me:

outline: 1px solid #fff;

Just a 1 pixel outline in the same color as your page background, et voila!