CODEWITHSUNDEEP
cssgoogle-chromebackground-imagezoomingcss-sprites
Nathaniel S
Nathaniel S

Reputation: 335

When zooming on Chrome, image sprite becomes misaligned

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.

View screenshot

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%.

Upvotes: 12

Views: 2039

Answers (4)

ToTaTaRi
ToTaTaRi

Reputation: 319

I see no problem when adding 

background-size: cover;
background-repeat: no-repeat;

to the codepen...

Upvotes: 0

Gabriel Cheung
Gabriel Cheung

Reputation: 546

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.

Upvotes: 4

Dolf Barr
Dolf Barr

Reputation: 529

Seems like setting background size to auto for .feature-icon will work:

.feature-icon {
  background-size: auto;
}

Image is not becoming misaligned, but maybe you have not provided all necessary CSS to check it.

You can check this fiddle for more details.

Upvotes: 0

Dani&#235;l Camps
Dani&#235;l Camps

Reputation: 1809

The full version of the image seems to be three 'Thumbs up' next to each other. You can replace the sprite element with the following (I tried this based on the example you provided, and this scales excellently):

<img src="data:image/png;base64,yourbase64stringhere" >

Now all you need to do is hide part of the image (e.g. the 66,6% on the right). For this you can use a clip path, or you can just cut off the sprite so that there is only one thumbs up icon.

Upvotes: -1

Related Questions