La posizione dello sfondo dell'icona dello sprite SVG viene visualizzata nella nuova versione di Chrome

Question

Sto utilizzando uno sprite SVG background-image e tutto sembra perfetto sulle versioni di Safari, Safari mobile, Chrome, Firefox, Opera, IE, ecc. Tuttavia, lo sfondo le posizioni non vengono visualizzate correttamente per alcuni dei miei colleghi che hanno una versione più recente di Chrome (so che uno di loro utilizza la versione 35.0.1916.153 su Mac, alcuni stavano usando una versione più recente diversa su Windows).

Ecco come appare nella mia versione di tutti i browser:

Ecco come appare in alcune versioni più recenti di Chrome:

HTML:

<span class="icon icon--chat"></span> 

CSS :

.icon{ 
    background:url(data:image/svg+xml;base64,[data]); 
    font-family:sans-serif; 
    background-position:top left; 
    background-size:cover; 
    display:inline-block; 
    width:100px; 
    height:100px; 
    padding:0; 
    margin:15px; 
    cursor:default; 
} 

.icon--chat{ 
    background-position:0 4%; 
} 

.210

Lo stesso codice esatto lavorato correttamente nei browser miei colleghi di lavoro quando ho messo su JsFiddle e Codepen, ma qui è in ogni caso: http://jsfiddle.net/HgR2N/

Ecco alcune cose che ho provato che non hanno risolto il problema:

• cambiare l'immagine di sfondo da un data-URI codificato in un file SVG regolare Svg
• utilizzando pixel per background-position invece di percentuali
• aggiungendo font-family:sans-serif; (ho letto da qualche parte che questo potrebbe risolvere il problema - non idea)
• rimozione dei margini, box-sizing:border-box;, ecc

Per favore fatemi sapere se avete qualche idea su che cosa potrebbe causare questo problema e come potrei essere in grado di risolvere il problema - grazie!

Update: ho aggiornato il mio Chrome alla versione 35.0.1916.153, così ora il mio collega ed io stiamo usando la stessa versione di Chrome per Mac e per lei sono in disordine e la mia sono ancora bene ...

Answer 1

Aggiornamento

: Ho aggiunto preserveAspectRatio="none" come un attributo nel tag svg nel file svg, e questo l'ha risolto! Maggiori informazioni qui: http://www.yootheme.com/support/question/6801?order=modified

Answer 2

Ho avuto lo stesso problema. L'ho risolto impostando background-size su valori esatti (non utilizzando auto). Originariamente ho definito le dimensioni del mio svg sprite in questo modo:

.icon { 
    background-image: url("sprite.svg"); 
    background-size: 4em auto; 
} 

ho cambiato in

.icon { 
    background-image: url("sprite.svg"); 
    background-size: 4em 99em; 
}