Question

Usually if I create CSS sprites, I line them all up next to each other with no spacing at all. For example if all the images are 10×10 pixels I would put them at the coordinates 0,10; 0,20; 10,10; 10,20.

But this seems to cause problems in certain circumstances. For example during page zooming and on mobile you can see the edge of the next sprite along.

Why does this problem occur, is it to do with rounding errors? Is simply adding spacing around the sprites the best way to avoid the problem? If so, is there a minimum or recommended amount of spacing we should have between the icons in the sprite image?

Answer 1

Sprite Bleeding may occur on zoom due to rounding, especially in IE (the old versions simply round to the nearest integer, e.G. a calculated value of 20.343px would be rendered as 20px).

Since the rounding error is never bigger than 1px, with a padding of 1px on all sides you can already fix that problem.

Modern browsers use a method called sub pixel rendering to mitigate this problem.