क्रोम

Question

में पृष्ठ पर एनीमेशन का उपयोग करते समय अजीब पृष्ठभूमि गड़बड़ अगर मेरे पास एक एनिमेटेड तत्व है जिसके बाद एक अन्य गैर-एनिमेटेड तत्व, बैंडिंग प्रभाव और विभिन्न रंग स्थानांतरण बग क्रोम में दिखाई देते हैं। देखने के लिए मुश्किल है, लेकिन मैं एक वीडियो दर्ज की गई है (यदि आप पेज पर ज़ूम, रंग परिवर्तन, देखना आसान): https://d26dzxoao6i3hh.cloudfront.net/items/1w1k2e3v0g04142U2A3H/Screen%20Recording%202017-10-30%20at%2011.35%20PM.mov

header { 
 
    height: 100vh; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    background: #263238; 
 
} 
 
    
 
header a { 
 
    animation: scroll-down-anim 1s infinite; 
 
} 
 

 
@keyframes scroll-down-anim { 
 
    0% { 
 
    transform: translateY(0); 
 
    } 
 
    100% { 
 
    transform: translateY(10px); 
 
    } 
 
}

<header> 
 
    <a href="#">Animated element</a> 
 
</header> 
 
<p>if i remove this, the glitch disappears</p>

कोई भी विचार कैसे इसे ठीक करने के लिए? अगर मैं <p> तत्व को हटा देता हूं, तो यह काम करता है। सफारी जैसे किसी भी अन्य ब्राउज़र पर भी काम करता है।

Answer 1

वैसे यह वास्तव में मेरे लिए काम करता है, इसलिए मुझे दृढ़ता से संदेह है कि यह सिर्फ आपके ग्राफिक्स कार्ड या क्रोम का संस्करण है जिसमें समस्याएं हैं।

हालांकि मैं सुझाव दूंगा कि ऐसा होने का कारण यह है कि translate शैली क्रोम को GPU का उपयोग करके प्रस्तुत करने के लिए मजबूर करती है और पी टैग होने पर इसे कठिन समय मिल रहा है।

आप एक ही अनुवाद इस तरह, तुम्हारे लिए भी तो उपयोग करने के लिए इस मुद्दे को ठीक हो सकता है कि पी टैग मजबूर करने के लिए थे, तो:

p { 
    transform: translateY(0); 
    } 

Answer 2

यह या क्रोम के साथ कुछ नहीं अपने कोड है

यह आपका जीपीयू है! विशेष रूप से यदि आपके पास एम सीरीज जीपीयू (लैपटॉप सटीक होना)

तो क्या होता है जब आप अनुपात का उपयोग कर रहे हैं या आपके मॉनीटर मूल सेटिंग्स से उच्च या कम रिज़ॉल्यूशन का उपयोग कर रहे हैं तो आप gpu पर बहुत अधिक दबाव डालते हैं!

अपने ग्राफिक्स सॉफ़्टवेयर को ओएस द्वारा अपडेट करें या रिज़ॉल्यूशन को अपने फैक्टरी रिज़ॉल्यूशन पर वापस लाएं