22

In CSS Sprites you will often find padding between each image. I believe the idea is so that if the page is resized then one image won't bleed into another.

I think this depends on the different types of browser zoom (best explained by Jeff).

However, I haven't been able to see this behaviour in my tests. Is this only a problem with older browsers? (I havent been able to test with IE6 at the current time so I'm counting that as 'old').

Should I still worry about leaving space? Its kind of a pain.

For instance :

A CSS Sprite I found for AOL has padding between each image : VIEW

but The Daily Show decided not to bother : VIEW

Cœur
  • 37,241
  • 25
  • 195
  • 267
Simon_Weaver
  • 140,023
  • 84
  • 646
  • 689
  • 3
    Bounty : I've pretty much concluded the answer to this question is YES MORE THAN EVER (except ONLY in Firefox)... But would love to hear any tricks people have come up with that may alleviate having to pad all of my images with a single pixel border to match the background it will be placed upon. – Simon_Weaver Mar 12 '11 at 07:08
  • I love how this AOL image is still there :-) – Simon_Weaver May 20 '21 at 17:06

4 Answers4

16

It shouldn't need to be padded, but when zoomed, especially in IE8 (betas more than the RC), there is image bleeding if there is no padding.

Best example is to go to Google.com -> Search, and zoom... you'll start to see "underlines" at the bottom right of the image as the zooming rounds up/down.

In theory, a 1px padding on all sides of a sprite should be fine.

Here's the sprite from Google (images)...

alt text

But when zoomed, the +,-,x icons bleed into the main Google logo.

alt text

Community
  • 1
  • 1
scunliffe
  • 62,582
  • 25
  • 126
  • 161
  • 2
    ah how ironic. i'm looking backward to OLDER browsers and theres a problem with NEWER browsers! thanks for the screenshots – Simon_Weaver Mar 15 '09 at 04:39
  • yeah, the clip above was actually taken in Firefox 3, but in IE8 (at certain zoom levels) its much worse. – scunliffe Mar 15 '09 at 18:56
5

Basically the answer is yes. Two years to the day after I asked this question will see the release of IE9. IE9 has this problem just as much - if not more than any other browser...

It's pretty infuriating because it's such a simple thing to fix.

With iPads increasing in marketshare - its's pretty essential to at least have a half decent experience with zooming un-uniform amounts.

I am going to have to put a single pixel border around every image to match the background color of the adjacent element (potentially different on each side). Fortunately I auto-generate all my csssprites based on an .xml file - so I can do this programatically without too much hastle. It's still a huge pain though...

Simon_Weaver
  • 140,023
  • 84
  • 646
  • 689
  • 2
    As of today, February 2014, the bug still exists on the mobile Safari browser, as well as with the desktop version of Firefox (confirmed up to version 27). Matching background color is unnecessary, better go with 1-2 pixels of full transparency around each sprite. This ads only very little to the file size, but works on every browser. – Ext3h Feb 24 '14 at 02:19
3

Simon - My experience is that this is certainly still a problem.

In response to your second question, why not use transparent padding? (Perhaps you are still supporting ie6 and this is non-trivial, in which case, I'm really sorry).

Tom Coleman
  • 3,037
  • 18
  • 16
1

Speaking of the older browsers (those using text zoom), you don't always need padding.

The main difference between your two examples is that the Daily Show sprite already includes the menu item's text in the image itself.

When using text zoom, the AOL menu items could stretch out vertically due to the larger font size, and the menu text might even wrap to two lines. To accommodate for such eventualities, those icons need a little padding to ensure they don't bleed. Typically, you'd just try to make sure it doesn't bleed on any of IE6's five text sizes.

Since The Daily Show's menu doesn't contain any (visible) HTML text its size won't be affected by text zoom (though you might need a line-height: 0; or so to be sure), so it doesn't need any padding.

As scunliffe already showed, browsers using page zoom may need sprites to have a little padding due to rounding errors.

Community
  • 1
  • 1
mercator
  • 28,290
  • 8
  • 63
  • 72
  • right that makes sense - the addition of text greatly increases the chance of the browser not scaling the text and image at the same time. so far I have not combined text (as html) and images in one. but the boundary conditions as shown by @scunliffe may make it a good idea to always do this – Simon_Weaver Mar 28 '09 at 01:25