I'm working on a page turn animation। प्रदर्शन निराशाजनक है। विशेष रूप से यदि आप pages कक्षा लेते हैं और इसे 800px चौड़े (पेस्ट $('.pages').css({width: '960px', height: '600px'}); को अपने कंसोल में) बनाते हैं। मेरे पास लगभग 16 संक्रमण एक बार चलते थे और इसे 9 तक कम कर देते थे, जिनमें से कई बदल जाते हैं! मुझे नहीं पता कि मैं और क्या कर सकता हूं।सीएसएस संक्रमण, एनिमेशन में भयानक प्रदर्शन है, व्यवहार
क्रोम GPU का उपयोग नहीं कर रहा प्रतीत होता है। यह प्रारंभिक पृष्ठ मोड़ पर एफपीएस बढ़ जाता है, लेकिन फिर नियमित अंतराल (about:flags के साथ इस सक्षम) पर नीचे डिप:
सफारी में इसे आजमाएँ और आप बेहतर प्रदर्शन प्राप्त लेकिन देखते हैं कि एनिमेशन समन्वयित नहीं होगा ऊपर, अक्सर एक दूसरे के पीछे अंतराल, और एक अजीब wobblyness है कि एक ही ब्राउज़र में Román Cortés's project also suffered from (मैंने इसे अभी तक Fx में काम नहीं किया है)।
वेब पर सीएसएस संक्रमण और एनिमेशन को अनुकूलित करने के तरीके के बारे में बहुत अच्छी सामग्री नहीं रही है और मैं ज्यादातर खुद को पढ़ रहा हूं। मैं उम्मीद कर रहा था कि किसी को इस तरह की सलाह होगी।
अच्छा, मुझे इस तकनीक का अध्ययन करना होगा क्योंकि सफारी इसे बेहतर लग रहा है। हालांकि, मैक पर क्रोम इसे यादृच्छिक रूप से नीचे की परत को काले रंग में बदलने या पिक्सल के यादृच्छिक भाग के साथ प्रस्तुत करता है। –
हां, जाहिर है क्रोम 15 (?) के वेबकिट संस्करण में एक बग है जहां परिवर्तन किए जाने पर अंतर्निहित जेड-ऑर्डर गड़बड़ हो जाते हैं। मैं स्पष्ट जेड-इंडेक्स सेटिंग्स के साथ एक संस्करण से निपटने जा रहा हूं और देख सकता हूं कि यह चीजों को ठीक करता है या नहीं। –
मैंने अभी यह पता लगाया है कि क्या आप '-webkit-transform-style: preserve-3d' जोड़ते हैं, यह उस तरह झिलमिलाहट नहीं करता है। मुझे अभी भी कुछ क्लिपिंग मिलती है जहां इसे नहीं करना चाहिए। –