Podczas powiększania w Chrome obraz jest mniej wyrównany

Question

W przeglądarce Chrome po powiększeniu ikony z ikoną obrazka stają się niewyrównane. Wygląda na to, że pozycja lekko spada w miarę zbliżania się do tła. Dzieje się tak tylko w Chrome.

Oto 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; 
} 
... 

Oto kod HTML.

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

Widziałem artykuły w Internecie, takie jak this. Wygląda na to, że problem z zaokrąglaniem pikseli dotyczy powiększania Chrome. Próbowałem zmienić rozmiar na 20px, aby uniknąć problemu, ale nadal dzieje się, gdy powiększanie 110%.

Answer 1

Pełna wersja obrazu wydaje się znajdować trzy "Kciuki w górę" obok siebie. Można wymienić element sprite z poniższych (próbowałem to na przykładzie, który podałeś, a to Wagi doskonale):

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

Teraz wszystko co musisz zrobić, to ukryć część obrazu (na przykład 66, 6% po prawej). Do tego możesz użyć clip path, lub możesz po prostu odciąć ikonkę tak, że jest tylko jedna ikona kciuka w górę.

Answer 2

Myślę, że można dodać rozmiar tła z automatycznym rozwiązaniem tego problemu. To działa dla mnie.

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

Zadziała tylko wtedy, gdy wszystkie twoje ikony wyrównać w jednym rzędzie lub kolumnie. (Gdy kolumna, powinno być: 100% auto). Bardziej podobny do poniższego wzoru:

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

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

Dzięki temu stylowi obraz tła zostanie dopasowany do elementu div tak, jak chcesz.

Mam nadzieję, że ci to pomoże.

Answer 3

Wydaje się ustawienie rozmiaru tła na auto dla .feature-icon zadziała:

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

Obraz nie staje się wyrównana, ale może nie dostarczyły wszystkie niezbędne CSS, aby to sprawdzić.

Aby uzyskać więcej informacji, sprawdź numer this fiddle.

Answer 4

widzę żadnego problemu podczas dodawania

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

do codepen ...