SVG hareketli simge arka plan konumu Chrome'un daha yeni bir sürümünde çıktı

Question

background-image SVG sprite kullanıyorum ve Safari, mobil Safari, Chrome, Firefox, Opera, IE, vb. Sürümlerimde her şey harika görünüyor. Ancak, arka plan Chrome'un daha yeni bir sürümüne sahip olan iş arkadaşlarımdan bazıları için konumlar düzgün görüntülenmiyor (Bunlardan birinin Mac'te Sürüm 35.0.1916.153 kullanıyor, bazıları Windows'da daha yeni bir sürüm kullanıyordu).

HTML:

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

CSS İşte

o Chrome'un bazı yeni sürümlerinde gibi görünüyor: Burada

tüm tarayıcılar benim sürümünde böyle görünüyor :

( ) Ben JsFiddle ve Codepen üzerine koydu zaman 363.210

aynı kod benim co-işçi tarayıcılarda doğru çalıştı, ama burada yine geçerli: Burada

http://jsfiddle.net/HgR2N/ sorunu sabit değil denedim birkaç şey vardır: bir veri-URI'dan arka plan resmi değiştirme

• yerine font-family:sans-serif; (i şimdi düzelmiş olabileceğini okumuştum ekleyerek yüzdeleri
• ait background-position için pikselleri kullanarak düzenli .svg dosyasının
• için SVG kodlanmış - hayır Fikir)
• çıkarmadan vb marjları, box-sizing:border-box;,

bu sorunun nedeni bu olabilir ve bunu düzeltmek mümkün olabilir hizmetler hakkında nasıl herhangi bir fikir varsa lütfen bildirin - teşekkürler!

Güncelleme: ... Ben şimdi benim meslektaş, Version 35.0.1916.153 benim Chrome'u güncellenmiş ve ben mac için Chrome'un tam aynı sürümünü kullanıyorsanız ve onun berbat halde ve mayın hala gayet

Answer 1

Güncelleştirme: svg dosyasındaki svg etiketinde bir öznitelik olarak preserveAspectRatio="none" ekledim ve bu düzeltildi! Daha fazla bilgi için: http://www.yootheme.com/support/question/6801?order=modified

Answer 2

Aynı problem vardı. background-size değerini tam olarak ayarlayarak düzeltdim (auto kullanarak değil).

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

Ben

Belki

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