Quando si esegue lo zoom su Chrome, lo sprite dell'immagine diventa disallineato

Su Chrome quando si usa lo zoom , le icone con uno sprite dell'immagine risultano disallineate. La posizione sembra diminuire leggermente man mano che si procede verso il basso sull'immagine di sfondo. Questo succede solo in Chrome.Quando si esegue lo zoom su Chrome, lo sprite dell'immagine diventa disallineato

View screenshot

Ecco il 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; 
} 
...

Ecco l'HTML.

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

Ho visto articoli su Internet come this. Sembra che si tratti di un problema di arrotondamento dei pixel con lo zoom in Chrome. Ho provato a cambiare la dimensione a 20px per evitare il problema, ma succede ancora quando si ingrandisce il 110%.

fonte

2016-01-06 Nathaniel S

Forse viene confermato questo? –

Puoi postare l'url di lavoro. –

https://codepen.io/anon/pen/oGMwbm Quando si modifica lo zoom al 50% o oltre (riduzione), è possibile vedere altre parti dello sprite. Ho notato che influenza le unità REM molto più di px, ma potrebbe anche dipendere dalle dimensioni dell'immagine. –

La versione completa dell'immagine sembra essere tre "Thumbs up" uno accanto all'altro. È possibile sostituire l'elemento sprite con il seguente (Ho provato questo sulla base dell'esempio che hai fornito, e questa immagine Scale eccellente):

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

Ora tutto quello che dovete fare è nascondere parte dell'immagine (ad esempio, il 66, 6% a destra). Per questo è possibile utilizzare uno clip path oppure è sufficiente tagliare lo sprite in modo che sia presente solo un'icona con il pollice in alto.

fonte

2017-10-13 12:40:11

Penso che si possa aggiungere una dimensione dello sfondo con auto per risolvere questo problema. Questo funziona per me.

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

Questo funziona solo quando tutte le icone si allineano in una riga o colonna. (Quando la colonna, che dovrebbe essere: 100% auto). Più come la seguente formula:

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

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

Con questo stile, l'immagine di sfondo avrebbero risolto nel div come si desidera.

Spero che possa aiutarti.

fonte

2017-10-17 02:05:53

La messaggistica con le dimensioni dello sfondo ha aiutato. Si noti che l'esempio di codepen è molto più semplice rispetto al markup della pagina effettivo e l'unica cosa che ha fatto la differenza è stata l'inganno di bgsize. –

Sembra come impostazione dimensioni sfondo per auto per .feature-icon funzionerà:

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

L'immagine non è diventare disallineato, ma forse non hanno fornito tutto il necessario CSS per controllarlo.

È possibile controllare this fiddle per ulteriori dettagli.

fonte

2017-10-17 06:46:31 Dolf

Non vedo alcun problema quando si aggiunge

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

al codepen ...

fonte

2017-10-18 13:35:52 ToTaTaRi

Quando si esegue lo zoom su Chrome, lo sprite dell'immagine diventa disallineato

risposta

Problemi correlati