2017-10-03 19 views
7

के साथ सीएसएस ग्रेडियेंट मास्क छवि का उपयोग करते समय ग्लिच, मैं किथ क्लार्क के ट्यूटोरियल के आधार पर शुद्ध सीएसएस लंबन का उपयोग कर रहा हूं, जो 3 डी ट्रांसफॉर्म का उपयोग करता है।
3 डी ट्रांसफॉर्म

transform: translate3d(0, 0, -30px) scale(1.31); 

इसके अलावा मैं रेडियल ढाल के साथ सीएसएस ढाल मुखौटा छवि का उपयोग कर रहा परतों कि parallaxed कर रहे हैं के लिए। https://codepen.io/justynaj/full/veyJLz/:

mask-image: radial-gradient(10px circle at 50% 150px, transparent 0, black 100%) 

पर नमूना ग्राफिक्स के साथ codepen मैं डेमो बनाया।

कुछ ब्राउज़रों में मुझे भयानक ग्लिच दिखाई देता है। सबसे बड़ी समस्या यह है कि ग्लिच नोडेटर्मिनिस्टिक रूप से दिखाई देते हैं। मैंने देखा कि मेरे कंप्यूटर सीपीयू/जीपीयू लोड होने पर ओक्युरेन्स की संभावना बढ़ जाती है। वेबकिट आधारित ब्राउज़र में दिखाई देने वाले ग्लिच, उदाहरण के लिए एंड्रॉइड पर विंडोज 10 या क्रोम ब्राउज़र पर ओपेरा ब्राउज़र। कभी-कभी वे पृष्ठ लोड के तुरंत बाद दिखाई देते हैं, और कभी-कभी पृष्ठ स्क्रॉलिंग के बाद भी दिखाई देते हैं।
नमूना स्क्रीनशॉट: https://image.ibb.co/hQcrmG/chrome_android.png

कोई विचार जो इस अजीब ब्राउज़र व्यवहार का कारण बनता है?

+0

अतिरिक्त स्क्रीनशॉट: [लिंक] (https://image.ibb.co/mD0Y0b/chrome_android_2.png), [लिंक] (https://image.ibb.co/heA0fb/glitch_chrome_windows.png)। –

उत्तर

4

फाड़ (ग्लिच) जब स्क्रॉल काफी कम कर रहे हैं जब मैं सादे पृष्ठभूमि रंग जेपीईजी img तत्व के बजाय इस्तेमाल करने की कोशिश:

https://codepen.io/Pendrokar/full/gGKGZO/

<img style="background-color:red" alt="" class="bg-img" aria-hidden="true"> 

के रूप में ही त्वरित प्रदर्शन प्रयोजनों के लिए "शैली" प्रयुक्त "src" को प्रतिस्थापित करना सीएसएस नियमों को हटाने और जोड़ने से तेज़ था। यदि यह समाधान पर्याप्त है, तो "div" तत्वों को "div" के साथ बदलें।

+0

मेरे डेमो में मैंने सादा पृष्ठभूमि रंग के साथ सरलीकृत छवियों का उपयोग किया, लेकिन मेरे असली मामले में बहुआयामी छवियां हैं, इसलिए उन्हें ठोस पृष्ठभूमि वाले divs के साथ बदलना मेरे लिए एक विकल्प नहीं है। –

संबंधित मुद्दे