Beim Zoomen auf Chrome wird das Bild-Sprite falsch ausgerichtet

Question

In Chrome, wenn Sie zoom zoomen, werden die Symbole mit einem Bild-Sprite falsch ausgerichtet. Die Position scheint etwas nach unten zu fallen, wenn Sie das Hintergrundbild weiter heruntergehen. Dies geschieht nur in Chrome.

Hier ist die 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; 
} 
... 

Hier ist der HTML.

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

Ich habe Artikel im Internet gesehen wie this. Klingt wie ein Problem mit der Pixelrundung beim Zoomen in Chrome. Ich habe versucht, die Größe auf 20px zu ändern, um das Problem zu vermeiden, aber es passiert immer noch beim Zoomen von 110%.

Answer 1

Die Vollversion des Bildes scheint drei 'Daumen hoch' nebeneinander zu sein. Sie können die Sprite-Element mit den folgenden ersetzen (ich versucht, dies am Beispiel bereitgestellt und diese skaliert hervorragend):

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

Alles was Sie jetzt tun müssen, um hide Teil des Bildes ist (zB 66, 6% rechts). Dazu können Sie eine clip path verwenden, oder Sie können nur das Sprite abschneiden, so dass es nur ein Daumen hoch Symbol gibt.

Answer 2

Ich denke, Sie könnten eine Hintergrundgröße mit Auto hinzufügen, um dieses Problem zu beheben. Das funktioniert für mich.

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

Dies funktioniert nur, wenn alle Ihre Symbole in einer Zeile oder Spalte ausgerichtet werden. (Wenn Spalte, soll es sein: 100% auto). Mehr wie die folgenden Formel:

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

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

Mit diesem Stil Hintergrundbild würde in den div beheben, wie Sie wollen.

Ich hoffe, es kann Ihnen helfen.

Answer 3

Scheint, wie Hintergrund Größe Auto für .feature-icon Einstellung funktioniert:

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

Das Bild ist nicht immer falsch ausgerichtet, aber vielleicht haben Sie nicht alle notwendigen CSS vorausgesetzt, es zu überprüfen.

Sie können überprüfen, this fiddle für weitere Details.

Answer 4

Ich sehe kein Problem, wenn

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

zum codepen Hinzufügen ...