वेबकिट: 3 डी सीएसएस गुणों का उपयोग किये बिना 2 डी ट्रांसफॉर्म के लिए सीएसएस फोर्स हार्डवेयर त्वरण

Question

क्या 3 डी (उदाहरण के लिए translateZ(0)) (Are 2D transforms hardware accelerated in Mobile Safari? के अनुसार) वेबकिट में सीएसएस का उपयोग करके 2 डी ट्रांसफॉर्म पर हार्डवेयर त्वरण को मजबूर करने का कोई तरीका है।

मैं position: fixed तत्वों, जहां तत्व position: absolute के बराबर कुछ पर सेट है, व्यूपोर्ट में तो तैनात नहीं रिश्तेदार के साथ इस मुद्दे को ढूँढने रहा हूँ, बल्कि यह पैरेंट कंटेनर तैनात रिश्तेदार (इस लेख http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/ में बताई गई विधि समाप्त होता है)।

मैं हार्डवेयर त्वरण का चयन कर रहा हूं क्योंकि पृष्ठभूमि आईओएस में संक्रमण पर सफेद झिलमिलाहट के रूप में होता है, इसी तरह यह बग https://github.com/jquery/jquery-mobile/issues/2856 रूपरेखा करता है।

Answer 1

आप एक 3 डी बदलने मान शून्य के अलावा अपने 2 डी को बदलने मूल्य जोड़ सकते हैं:

el { 
    transform: 2DValue(val) 3DValueSetToNull(0); 
    transform: 2DValue(val); 
} 

असली सीएसएस में कौन सा की तरह कुछ कर सकते हैं: एक 3 डी का उपयोग सुनिश्चित करें

div { 
    /* translateZ(0) will not interfere with the rotate value */ 
    /* Also with -webkit-, -moz-, -o- */ 
    transform: rotate(90deg) translateZ(0); 
    /* Compatibility for older (yep) browsers */ 
    /* Also with -webkit-, -moz-, -ms-, -o- */ 
    transform: rotate(90deg); 
} 

उस मान को बदलें जो आपके 2 डी ट्रांसफॉर्म मान में हस्तक्षेप नहीं करेगा।

पुनश्च: 3 डी बदलने मान हैं:

• translate3d (एक्स, वाई, जेड)
• translateZ (z)
• scale3d (sx, एसवाई, SZ)
• scaleZ (SZ)
• rotateX (कोण)
• rotateY (कोण)
• rotate3d (एक्स, वाई, जेड, कोण),
• परिप्रेक्ष्य (पी)
• matrix3d ​​(...)

Answer 2

यह backface-visibility: hidden की स्थापना की तरह दिखता है काम कर देता है। मैंने fps-counter का उपयोग करके क्रोम के लिए केवल इसकी पुष्टि की है।

.3d-accelerate { 
    backface-visibility: hidden; 
    -webkit-backface-visibility: hidden; 
} 

एफपीएस काउंटर केवल transition के साथ दिखाई नहीं देता है। translate: transform3d(0, 0, 0) जोड़ते समय यह दिखाता है। मैं बस backface-visibility के साथ दिखाता हूं।