When zooming on Chrome, image sprite becomes misaligned

Question

On Chrome when you zoom, the icons with an image sprite become misaligned. The position seems to drop slightly as you go farther down the background image. This only happens in Chrome.

Here's the CSS.

.feature-icon {
    height: 22px; 
    width: 22px;
    display: inline-block;
    background-image:url(feature-icon-sprite.png);
    background-size: 22px;
}
.schedule {
    background-position: 0 0; 
}
.selections {
    background-position: 0 -22px; 
}
.messages 
    background-position: 0 -44px; 
}
...

Here's the HTML.

<span class="feature-icon schedule"></span>
<span class="feature-icon selections"></span>
<span class="feature-icon messages"></span>

I've seen articles around the internet like this. Sounds like it's some pixel rounding issue with zooming in Chrome. I've tried changing the size to 20px to avoid the issue, but it still happens when zooming 110%.

Answer 1

I think you could add a background size with auto to fix this issue. This works for me.

.thump {
  background-size: auto 100%; 
}

This only works when all your icons align in one row or column.(when column, it should be: 100% auto). More like the formula below:

background-size: auto 100%/(rows);

background-size: 100%/(columns) auto;

With this style, your background image would fix into the div as you want.

Hope it can help you.