A while back I’ve written a tutorial on how to use the CSS Clip property to load an inline image with a sprite image file. (How to Use CSS Clip Property for Inline Image Sprites). After using it for some time, I stumbled upon an issue that I wanted to address.
I came to realize that because it is an inline image and not a background image, therefore browsers will try to accommodate the width and height of the entire sprite. Up until now, prior to experiencing this issue, I thought if I’ve used the CSS Clip property, it would appropriately handle or “clip off” the excess image on the fly but this is not so. At least it is not so in certain browsers.
First try out the demo in different browsers like Firefox,Opera,Safari, IE, and Chrome.
You’ll quickly see that only Firefox and IE properly handles the clipping of the image thus no horizontal scroll bars are seen.
To better understand why this is happening, let’s have a look at the below image.
As you can see from the image above, the dimensions of the “whole” physical image is being considered in the browsers that exhibits the scrollbar. I don’t believe this is the correct behavior. I believe Firefox and IE has gotten it right. As the CSS property implies “Clipped” so I would expect it to be clipped visually and technically.
So what can we do about this? Well there are two options. Either you take the image you want to put in that spot out of the sprite and make it it’s own individual image or you re-position that image within the sprite so the image dimensions would not extend beyond the viewport.
I guess if we really thought about it, we could plan out how we will use a particular sprite image by noting down where each image element will go before hand and place them relative close to their final destination. For example you have a logo, rss icon, twitter icon, and a footer newsletter icon. And your mockup already tells you where these elements will go on the site so when you create the sprite image, place these icons/logos respectively to their top left, top right, bottom left and bottom right of the canvas.
I hope this article was insightful and you can use the suggestions above to remedy these situations. Good luck!
