सीएसएस एनीमेशन केवल आईपैड पर सफारी को क्रैश करता है

Question

मेरी साइट केवल आईपैड और आईपैड पर सफारी में दुर्घटनाग्रस्त हो जाती है। मैं एक सीएसएस 3 एनीमेशन के साथ हेडर में एक बड़ी तस्वीर (4800 x 374px, हालांकि केवल 336 केबी) एनिमेट कर रहा हूं। कुछ दस सेकंड के बाद, यह सफारी को दुर्घटनाग्रस्त कर देता है।

आप http://bakabaka.nl/preview/leuk/

पर साइट मैं इस दुर्घटना को रोकने कर सकते हैं, और यदि ऐसा है तो, कैसे देख सकता है? क्या मैं एनीमेशन को आसान बना सकता हूं? यह अब बहुत जंजीर है ...

Answer 1

यह अंधेरे में एक शॉट है, लेकिन शायद इसके लायक है।

मैं क्या कोशिश करेंगे के रूप में यह हार्डवेयर त्वरण का उपयोग करता iOS पर एक 3 डी एनीमेशन का उपयोग करने के लिए है:

-webkit-transform: translate3d(X,Y,Z); 

अधिक जानकारी के लिए देखें: '3D Transform Functions'

इसके अलावा वहाँ कुछ समस्याओं का बहुत साथ हो सकता है आईओएस पर बड़ी छवियां। शायद यह टुकड़ों में कटौती करने के लिए एक बेहतर समाधान होगा। इसके बारे में और पढ़ें: "Know iOS Resource Limits"

Answer 2

मैं कुछ भी इसी तरह का अनुभव कर रहा था। किसी और के लिए जो दीवार के खिलाफ अपने सिर को टक्कर दे रहा है, यह डेस्कटॉप और आईओएस दोनों पर सफारी को दुर्घटनाग्रस्त कर रहा था। यह वास्तव में पसंद नहीं है ::window-inactive चयनकर्ता।

::-webkit-scrollbar-thumb:window-inactive { 
    background: #f2f2f2; 
}