एसवीजी स्प्राइट आइकन पृष्ठभूमि स्थिति क्रोम

Question

के नए संस्करण में दिखाई देती है, मैं background-image एसवीजी स्प्राइट का उपयोग कर रहा हूं, और सफारी, मोबाइल सफारी, क्रोम, फ़ायरफ़ॉक्स, ओपेरा, आईई इत्यादि के मेरे संस्करणों पर सबकुछ बढ़िया दिखता है। हालांकि, पृष्ठभूमि पद मेरे कुछ सह-श्रमिकों के लिए सही ढंग से प्रदर्शित नहीं हो रहे हैं जिनके पास क्रोम का एक नया संस्करण है (मुझे पता है कि उनमें से एक मैक पर संस्करण 35.0.1916.153 का उपयोग कर रहा है, कुछ विंडोज़ पर एक अलग नए संस्करण का उपयोग कर रहे थे)।

यहाँ यह सभी ब्राउज़रों के अपने संस्करण में की तरह लग रहा है:

एचटीएमएल:

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

सीएसएस

यहाँ क्या यह क्रोम के कुछ नए संस्करण में की तरह लग रहा है :

.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

ठीक उसी कोड अपने सहकर्मियों के ब्राउज़र में सही ढंग से काम किया जब मैं JsFiddle और Codepen पर डाल दिया, लेकिन यहाँ यह वैसे भी है: http://jsfiddle.net/HgR2N/

यहाँ कुछ चीजें मैं कोशिश की है कि समस्या नहीं सुलझाई है कर रहे हैं:

• एक डेटा-URI से पृष्ठभूमि छवि को बदलने प्रतिशत
• जोड़ने font-family:sans-serif; (मैं कहीं पढ़ा है कि है कि यह ठीक कर सकता है के बजाय background-position के लिए एक नियमित .svg फ़ाइल
• पिक्सल का उपयोग करने के एसवीजी इनकोडिंग - कोई विचार)
• को हटाने के मार्जिन, box-sizing:border-box;, आदि

कृपया मुझे बताएं कि आप क्या इस कारण समस्या हो सकती और मैं इसे कैसे ठीक करने के लिए सक्षम हो सकता है के बारे में कोई विचार है जाने - धन्यवाद!

अद्यतन: मैं संस्करण 35.0.1916.153 मेरे Chrome अद्यतन है, इसलिए अब मैं अपने सह कार्यकर्ता और मैं मैक के लिए क्रोम का ठीक उसी संस्करण का उपयोग कर रहे हैं और उसकी अव्यवस्थित हैं और मेरा अभी भी ठीक हैं ...

Answer 1

अद्यतन: मैंने svg फ़ाइल में svg टैग पर एक विशेषता के रूप में preserveAspectRatio="none" जोड़ा, और इसे ठीक किया! अधिक जानकारी यहां: http://www.yootheme.com/support/question/6801?order=modified

Answer 2

मुझे एक ही समस्या थी। मैंने background-size को सटीक मानों (auto का उपयोग नहीं कर) पर सेट करके इसे ठीक किया है।

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

मैं इसे

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