इनपुट क्षेत्र छोड़ने कलाकृतियों

Question

http://jsfiddle.net/danielcgold/SYgzJ/

आप इनपुट पर क्लिक करते हैं तो कलंक पर जाना, कलाकृतियों स्क्रीन क्रोम 15. में मैं पहली बार एक साइट पर इस मुद्दे पर ध्यान पर छोड़ दिया जाता है मैं मैं विकास कर रहा हूं इसलिए मैंने सबकुछ हटा दिया लेकिन इनपुट क्षेत्र और एक बटन। जब मैं बटन हटा देता हूं, तो संक्रमण ठीक होता है। कोई विचार?

Answer 1

प्रदर्शित करने के लिए अपने इनपुट क्षेत्र को यह CSS जोड़ है:

input { 
    -webkit-transform: translate3d(0,0,0) 
} 

यह आपके GPU का उपयोग करने के लिए सभी प्रतिपादन जो कलाकृतियों समस्या का समाधान होगा करने के लिए क्रोम के लिए बाध्य करेगा और अपने एनिमेशन को परेशान करें।

Answer 2

यह क्रोम के सीएसएस संक्रमणों के प्रतिपादन में एक बग है। लेकिन आप तत्व "ताज़ा करें" ऑपरेशन को मजबूर कर इसे काम कर सकते हैं। कृपया ध्यान दें कि आप input तत्व नहीं ताज़ा करने की आवश्यकता है, लेकिन यह माता पिता है, तो निम्न कोड तुम्हारी मदद करेगा:

$(document).ready(function(){ 
    $('#test').blur(function(){ 
     $(this).parent().addClass('repaint'); 
    }); 
    $('#test').focus(function(){ 
     $(this).parent().removeClass('repaint'); 
    }); 
}); 

और repaint वर्ग माता पिता के दृश्य से संबंधित कुछ है चाहिए, उदाहरण के अलग रंग के लिए:

.repaint { 
color: red; 
} 

लेकिन आप colorvisibility या अन्य दृश्य-संबंधित (लेकिन माता-पिता के लिए महत्वपूर्ण/दृश्यमान नहीं) के साथ प्रतिस्थापित कर सकते हैं।

यहाँ jsfiddle वैकल्पिक हल

Answer 3

मैं सफारी में बॉक्स छाया कलाकृतियों के साथ एक समान समस्या थी, और ध्यान शासन समस्या तय करने के लिए -webkit-transform:scale(1); जोड़ने पाया।

http://jsfiddle.net/SYgzJ/48/ देखें - यह अब ठीक काम करना चाहिए।

के रूप में सीजर ने कहा, -webkit-transform: translate3d(0,0,0); इसे ठीक होगा, लेकिन यह भी पाठ प्रतिपादन प्रभावित कर सकते हैं।