11

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

Paolo Forgia
  • 6,572
  • 8
  • 46
  • 58
Nathaniel S
  • 325
  • 2
  • 11
  • Can you please post working url. – Rijo Oct 12 '17 at 09:04
  • https://codepen.io/anon/pen/oGMwbm When changing zoom to 50% or beyond (zooming out), other parts of the sprite can be seen. I've noticed that it affects REM units much more so than px, but it might also be dependent on the image size. – MarengoHue Oct 12 '17 at 11:23
  • @MokonaModoki In that codepen, it seems to be fixed by adding `background-size:300%;` to the `.thumbs-up-image` class. – Jonathan Oct 12 '17 at 11:53
  • Could you please share with us the URL, which having the issue!! – Satheesh Kumar Oct 12 '17 at 19:24
  • 1) My codepen from the previous comment, having issues with zoom of 50% or less: https://codepen.io/anon/pen/oGMwbm ; 2) One of the links listed in the question: https://codepen.io/benfrain/pen/Cctvl – MarengoHue Oct 13 '17 at 06:00
  • @MokonaModoki, see if this helps https://stackoverflow.com/questions/32255324/css-sprite-showing-part-of-another-image-when-zooming – Tarun Lalwani Oct 13 '17 at 13:20

4 Answers4

4

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.

Gabriel Cheung
  • 526
  • 3
  • 9
  • Messing with the background size did help. Please note that the codepen example is much more simple than the actual page markup and the only thing that did make a difference was messing with bgsize. – MarengoHue Oct 18 '17 at 14:04
0

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.

Daniël Camps
  • 1,737
  • 1
  • 22
  • 33
0

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.

Dolf Barr
  • 509
  • 4
  • 13
0

I see no problem when adding 

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

to the codepen...

ToTaTaRi
  • 311
  • 1
  • 8