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 swap class / id using jquery in a css list?

    How to make rollover images in CSS using multiple image backgrounds and :hover pseudo

    How to check css in unit test

    Restricted to CSS-2.1, can I ensure that one border in a table shows 'on top' of another border when borders are collapsed

    how to make NGINX serve static content like .js, .css, .html?

    How to use a backslash in css content property?

    how to append a css class to an element by javascript?

    CSS - how do I float another div over another without overlapping

    How do I apply a specific class to a navigation list, without breaking the nav functionality in mobile-view?

    How to set link on image using maplink in responsive theme?

    How to inherit Image width and height to video tag

    How to set CSS3 transition using javascript?

    How do I align these pictures vertically?

    How to make one list-item in menu higher than the others with CSS?

    How to show ellipsis for long cell values in kendo ui grid?

    how do responsive recaptcha images

    How to set different css attributes with JQuery?

    How to convert external css properties to inline property? [closed]

    how to make html email look exactly the same as previewed just in browser?

    How to remove/replace cached css and js file from client Browser?

    How to get css button to stay active after it has been clicked?

    How to vertical center ordered list-navigation

    How to make a toggleable navbar in pure CSS?

    How to format single line css file?

    How to make sure Text always stays on top of Image (even when resizing)?

    how to customize css ellipse for a text string [duplicate]

    CSS: How to set several div's in one line with 100% width?

    How to position a div to be visible but not count towards document width

    how to show element if visible in view-port with jQuery? (UPDATE)

    How to select multiple objects of a class for css manipulation