CSS sprite - showing part of another image when zooming


Tags: html,css,background-image,css-sprites,page-zoom

Problem :

I have following CSS sprite. When I try to display the first icon, it works fine, but when I set zoom to 150%, I see also small part of the second icon. This problem is on Google Chrome and Internet Explorer, but not on Mozilla Firefox:

JSfiddle

div {
    width: 29px;
    height: 29px;
    background-image: url(http://i.imgur.com/O2Cp0nb.png);
}
<div></div>

That's how it looks for me on 150% zoom:

Update: Chris suggested that I need to put some space between icons. So my question is: why? And why it works fine on Mozilla Firefox even without that space?



Solution :

Different browsers may use different algorithms for rounding numbers and rendering images in certain cases. You could read some articles about it, for example — this and this.

So, when your zoom is 150% and you have 29x29px image, your browser is need to render 43.5x43.5px image. How each version of each browser will round it? We don't know, maybe 43x43px, maybe 44x44px. There is article about sprites and zoom.

I create new code snippet with two pairs of images. The first pair uses your image sprite and the second — my. I increased the Facebook image size from 29x29px to 30x30px. Try to zoom it. You can see they have problems on different zoom ratio (the first — on 150%, the second — on 110%125%).

JSFiddle

.fb29 {
    width: 29px;
    height: 29px;
    background: url(http://i.imgur.com/O2Cp0nb.png) no-repeat;
    background-size: 29px;
}

.sun29 {
    margin-top: 10px;
    width: 16px;
    height: 16px;
    background: url(http://i.imgur.com/O2Cp0nb.png) 0 -29px no-repeat;
    background-size: 29px;
}

.fb30 {
    margin-top: 10px;
    width: 30px;
    height: 30px;
    background: url(http://i.imgur.com/mRIPLXO.png) no-repeat;
    background-size: 30px;
}

.sun30 {
    margin-top: 10px;
    width: 16px;
    height: 16px;
    background: url(http://i.imgur.com/mRIPLXO.png) 0 -30px no-repeat;
    background-size: 30px;
}
<div class="fb29"></div>
<div class="sun29"></div>

<div class="fb30"></div>
<div class="sun30"></div>

So, my advice is to add 1px between images to be independent from different browsers rounding algorithms and browsers bugs:

JSFiddle

.fb29 {
    width: 29px;
    height: 29px;
    background: url(http://i.imgur.com/dKxYwhZ.png) no-repeat;
    background-size: 29px;
}

.sun29 {
    margin-top: 10px;
    width: 16px;
    height: 16px;
    background: url(http://i.imgur.com/dKxYwhZ.png) 0 -30px no-repeat;
    background-size: 29px;
}

.fb30 {
    margin-top: 10px;
    width: 30px;
    height: 30px;
    background: url(http://i.imgur.com/1fJyJVK.png) no-repeat;
    background-size: 30px;
}

.sun30 {
    margin-top: 10px;
    width: 16px;
    height: 16px;
    background: url(http://i.imgur.com/1fJyJVK.png) 0 -31px no-repeat;
    background-size: 30px;
}
<div class="fb29"></div>
<div class="sun29"></div>

<div class="fb30"></div>
<div class="sun30"></div>

If you need to support old IE browsers, look into this article.

Now you could use some useful things on gulp/grunt to automatically generate sprites where you can set gap/margin between images. See this.


    CSS Howto..

    How to fill margin space with divs and give it styles?

    How to use a CSS attribute selector to target a specific height?

    How to set a image over another in the same tag via CSS?

    Slideshow image with buttons

    How to override priority in CSS classes?

    How to change the way a copy-paste text behaves?

    CSS - how to avoid class= for every single paragraph?

    How to have equal padding on both side of a div. CSS

    CSS float: how to form the second row based on tallest DIV?

    How can I stop mobile Safari from pausing before beginning a transition

    How to use same css for separate media query conditions

    How to make UL Tabs with only HTML CSS

    How can I include a HTML-encoded “content:” character in CSS? [duplicate]

    How To Do Multiple Hover On List

    How do I vertically align the text to the middle using CSS?

    how to make a stretchable blog header

    How to do mutiple css class in one line javascript code

    How to selectively load css in rhtml?

    how to align vertically an absolute element with a variable height above its parent?

    How to prevent specific css style sheet from styling a specific html tag

    How to change placeholder color on focus?

    How to Implement this UI with CSS [closed]

    TD Borders from a table, not showing in IE8 [duplicate]

    How to remove an element without id

    How to display visual rows and cols in textarea using css

    How to make the content div scrollable without using javascript

    how can bring to front clicked div in jquery?

    how to make dropdown using html and css?

    How do I get the height of a textarea

    How to vertically align text over an image