राफेल एसवीजी: क्रोम में बदसूरत प्रतिपादन

Question

Raphael.js के साथ यूरोप के कुछ छोटे मानचित्र पर काम करना।

यह आई 7 +, सफारी, फ़ायरफ़ॉक्स में ठीक काम करता है। हालांकि, क्रोम में, जब फ्रांस पर होवर किया जाता है तो मेरे नक्शे पर एक सफेद बॉक्स दिखाई देता है। ऐसा लगता है कि कहीं भी नहीं निकलता है, यह केवल फ्रांस के साथ होता है और जब आप दूसरे देश में हो जाते हैं तो यह गायब हो जाता है।

मेरी नक्शे के JSFiddle यहाँ है; मुझे अभी भी कोड साफ़ करने की जरूरत है, लेकिन यह काम करता है।

http://jsfiddle.net/ontolecabaret/ncyge/

ऐसा लगता है जैसे कि समस्या इस लाइन के साथ क्या करना है: जब मैं हटाने की स्थापना 'छोड़', बॉक्स दिखाई नहीं देता

$c.css({ top: e.pageY, left: e.pageX}).fadeIn(500); 

। जब मैं 50px, या 50px मार्जिन-बाएं पर 'बाएं' डालता हूं, तो बॉक्स बहुत छोटा दिखाई देता है। ऐसा लगता है जैसे किसी भी तरह फ्रांस फ्रांस द्वारा किसी भी तरह से धक्का दिया जाता है, लेकिन मैं अपनी अंगुली को उस पर नहीं डाल सकता।

संपादित करें: इस प्रश्न को दोबारा खोलना, क्योंकि फिक्स मेरी समस्या को ठीक नहीं करता है।

मानचित्र पर -webkit-transform: translate3d(0,0,0); सीएसएस के साथ, सफेद बॉक्स चला गया है, लेकिन एक नई समस्या है: काले मानचित्र मेरे पूरे मानचित्र पर दिखाई दे रहे हैं और पथ ठीक से प्रस्तुत नहीं करते हैं।

यह भी है,, क्रोम में एक बग या मैं इस एक ही रास्ता या अन्य ठीक कर सकते हैं?

एसवीजी सफारी, एफएफ, यहां तक ​​कि आईई में ठीक है।

Answer 1

मैंने देखा है कि क्रोम एनीमेशन के नवीनतम संस्करणों में कभी-कभी परीक्षण छोड़ते हैं (मैं बिल्कुल सही नहीं कर सकता), जिस तरह से मैंने तय किया है, यह वेबकिट को छवि को कैश करने के लिए जीपीयू का उपयोग करने के लिए मजबूर कर रहा है। आप एक 3 डी परिवर्तन लागू करके इस लक्ष्य को हासिल:

#map { 
    background: #f4f3f0; 
    width: 631px; 
    height: 686px; 
    -webkit-transform: translate3d(0,0,0); 
} 

http://jsfiddle.net/5s7dR/

लेकिन चूंकि-के लिए किसी कारण मैं नहीं कर सकता थाह-यह अपने पथ खराब करता है, तो आप -webkit-backface-visibility: hidden;

के साथ एक ही प्रभाव को प्राप्त कर सकते हैं

#map { 
    background: #f4f3f0; 
    width: 631px; 
    height: 686px; 
    -webkit-backface-visibility: hidden; 
} 

http://jsfiddle.net/VaKvX/

यह एक समस्या राफेल के लिए विशिष्ट नहीं है, यह कभी कभी सीएसएस संक्रमण, जे के साथ होता है प्रश्न और वेनिला जेएस।

Answer 2

मैं फोंट के साथ एक समस्या थी - gridy सीमा, जब बहुत बड़ी मेरे समाधान viewBox को बढ़ाने के लिए था - कारक 10 से - तो सहिष्णुता बहुत छोटा हो जाता है, लेकिन कीमत सभी सामग्री कारक है - 10 से?