iPhone WebKit CSS एनिमेशन झिलमिलाहट का कारण बनता है

Question

यह iphone साइट है: http://www.thevisionairegroup.com/projects/accessorizer/site/

आप "अब खेलें" पर क्लिक करने के बाद आपको एक गेम में ले जाएंगे। बंदूकें अंदर स्क्रॉल करेंगी। आप पर्स और सामान ऊपर और नीचे स्क्रॉल कर सकते हैं। आप देख सकते हैं कि जब आप जाने देते हैं तो वे जगह में झांकते हैं। जैसे ही वह स्नैप होता है, एक झिलमिलाहट होती है। मेरे द्वारा उपयोग किए जा रहे एकमात्र वेबकिट एनिमेशन हैं:

'-webkit-transition': 'none'

'-webkit-transition': 'all 0.2s ease-out'

'-webkit-transform': 'translate(XXpx, XXpx)'

मैं या तो पहले या दूसरे संक्रमण को चुनता हूं, जिसके आधार पर मैं इसे चेतन करना चाहता हूं या नहीं, और परिवर्तन ही एकमात्र तरीका है जिससे मैं चीजों को घुमाता हूं।

हालांकि सबसे बड़ा मुद्दा यह है कि जब आप "मिलान आइटम" पर क्लिक करते हैं, तो "फिर से खेलें" पर क्लिक करें। आप बंदूक को चेतन के रूप में देखेंगे, सामान / पर्स की पूरी पृष्ठभूमि सफेद हो जाती है। क्या कोई कृपया मुझे कुछ अंतर्दृष्टि के साथ विकीर्ण कर सकता है कि यह क्यों हो रहा है ??

Answer 1

मैंने जोड़ा -webkit-backface-visiblityऔर ज्यादातर मदद की, लेकिन पेज को फिर से लोड करने के बाद भी मेरे पास एक प्रारंभिक झिलमिलाहट थी। जब मैंने जोड़ा -webkit-perspective: 1000, तो कोई झिलमिलाहट नहीं थी।

-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;

Comments

1000 के पीछे क्या जादू है? क्या कोई अन्य मूल्य (> 0) काम कर सकता है?

— cYrus

नोट: यह विंडोज़ क्रोम v19 पर माउस की घटनाओं के लिए एनीमेशन को अनुत्तरदायी बनाता है: इसे जोड़ने के अभ्यास में, कोई झिलमिलाहट नहीं है, लेकिन एनीमेशन हमेशा शुरू नहीं होता है (माउस होवर या जो भी हो)

— Skyline26

नोट: बैक-विज़िबिलिटी जोड़ने से आपके रंग रेंडरिंग बदल जाएंगे। यहाँ एक उदाहरण है जो बैकफुट दृश्यता पर और बंद है: bit.ly/13ldbvY

— Tamik Soziev

लिंक तत्वों को परिवर्तित करने का प्रयास करते समय पाठ की चंचलता के साथ मुझे यह समस्या थी। बैक-विज़िबिलिटी में बदलाव ने एंटी-अलियासिंग को बदल दिया, जिससे फ़ॉन्ट वास्तव में पतला हो गया। का उपयोग करके फिक्स्ड -webkit- फ़ॉन्ट-चौरसाई: उपपिक्सेल-एंटीएलियास;

— डैन

@ मुझे लगता है कि हम कभी नहीं जानेंगे

— डेनी

Answer 2

यह कोशिश करो, और उम्मीद है कि यह मदद करेगा:

#game {
  -webkit-backface-visibility: hidden;
}

Comments

यह सफारी डिफॉल्ट में शानदार काम करता है लेकिन स्टैंडअलोन मोड में विफल रहता है। आपके पास कोई विचार है?

— cYrus

Answer 3

body {-webkit-transform:translate3d(0,0,0);}

Comments

यह मेरे लिए था .. हालाँकि मुझे इसे एक #wrapperतत्व पर लागू करना था क्योंकि शरीर पर लगाने से लेआउट खराब हो जाएगा।

— adamJLev

अगर कोई बैक-बैक देखना चाहता है "-webkit- बैकफेस-विजिबिलिटी: हिडन;" काम नहीं किया, लेकिन यह एक सही है। धन्यवाद!

— नचटगोल्ड

उत्तम। -webkit-backface-visibility: hidden;धुँधली होने के लिए किसी भी पैमाने पर परिवर्तन का कारण बना। body {-webkit-transform:translate3d(0,0,0);}एक इलाज किया।

— लियाम

मैं कोशिश कर रहा हूं लेकिन यह मेरे लिए काम नहीं कर रहा है। : कोड स्निपेट है codeply.com/go/g7Zp98paz5

— Fran_gg7

इसने मेरे लिए काम किया। मेरे मामले में, scale(1)झिलमिलाहट का कारण बना। बहुत बहुत धन्यवाद

— jansesun

Answer 4

मेरे मामले का वास्तविक जवाब यहाँ है। कोई व्यक्ति करीब था: -वेबकिट-बैकफेस-दृश्यता: छिपा हुआ; लेकिन असली जवाब -webkit-backface-दृश्यता: छिपा हुआ है; माता-पिता को जोड़ने की जरूरत है ।

Comments

मुझे वास्तव -webkit-backface-visibility: hidden;में पैरेंट डिव, एनिमेटेड डिव, और एनिमेटेड डिव के बच्चों को जोड़ने की जरूरत थी । एक बार जब मैंने ऐसा किया, तो यह त्रुटिपूर्ण था।

— mattstuehler

मुझे लगता है कि मेरी झिलमिलाहट को भी माता-पिता से जोड़कर तय किया। यह वास्तव में क्या करता है?

— चॉवी

इसे माता-पिता के साथ जोड़ने से बाल तत्वों पर "निश्चित" स्थिति

— जेम्स

Answer 5

मुझे एक "टिमटिमा" सीएसएस संक्रमण के साथ भी समस्या थी। विचाराधीन एनीमेशन ऑफ स्क्रीन से फिसलने वाला एक मेनू था, और जब एनीमेशन समाप्त हो गया, तो पूरा मेनू फ्लैश / फ़्लिकर हो गया।

जैसा कि यह निकला, यह एक वास्तविक आईओएस फीचर, "टैप हाइलाइट" के कारण हुआ, जो किसी कारण से सीएसएस एनीमेशन के समाप्त होने के बाद किक किया गया (यानी वास्तविक टैप के बाद रास्ता), और केवल तत्व के बजाय पूरे मेनू को हाइलाइट किया गया यह टेप किया गया था। जैसा कि यहां वर्णित है, मैंने पूरी तरह से टैप-हाइलाइट को अक्षम करके समस्या को "ठीक" कर दिया है :

-webkit-tap-highlight-color: rgba(0,0,0,0);

Answer 6

-webkit-backface-visibility: hidden;जब हमने इस समस्या को मारा तो माइकल का जवाब काम कर गया। हमारे पास एक iOS 3.1.3 और पहले की सीमा बग को रोकने के लिए translateZ(0px)हमारे <body>टैग पर था IFRAMEऔर इसने झिलमिलाहट का कारण बना। -webkit-backface-visibility: hidden;प्रत्येक तत्व को जोड़कर हम एनिमेटेड फ़्लिकर तय कर लेते हैं! जीवन रक्षक।

Answer 7

div { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }

मैंने देखा जब मैं एक div पर एक मंडराना राज्य था पृष्ठ झिलमिलाहट, भले ही मैं किसी भी सीएसएस या js यह करने के लिए संलग्न नहीं था। शायद यह किसी और की मदद करता है।

Comments

मेरे लिए कि एक ने चाल चली। जब संक्रमण हुआ था तब अन्य केवल प्रासंगिक थे।

— नादव

Answer 8

यदि किसी को पता चलता है कि बैक-विज़िबिलिटी काम नहीं कर रही है, तो आप अपने एनिमेटेड तत्व पर पहले से मौजूद गुणों को देख सकते हैं। हमारे लिए, हमने पाया कि overflow-y: scrollएक absoluteया fixedतैनात तत्व आईओएस पर प्रमुख झिलमिलाहट पैदा कर रहा था।

बस overflow-y: scrollइसे हटा दिया।

Comments

हटाने से overflow-y: scrollमेरे मामले में मदद मिली। आपको बहुत - बहुत धन्यवाद!

— यमसत

शायद मेरा मामला भी यही है। लेकिन मैं इस तत्व के लिए पूर्ण पॉज़िटॉन को ओवरफ़्लो-वाई को नहीं हटा सकता। कोई उपाय?

— कोबी कोहेन

Answer 9

हालांकि मेरे पास था -webkit-transform-style: preserve-3d;और -webkit-backface-visibility: hiddenफ़्लिकर अभी भी हो रहा था।

मेरे मामले में इसका कारण था z-index। सक्रिय तत्व पर इसे बढ़ाने से मदद मिली।

Answer 10

यहाँ एक नया समाधान है। मैं jQuery के साथ पृष्ठभूमि-छवि सेट कर रहा था, और 3 डी-रेंडरिंग में से किसी ने भी काम नहीं किया। इसलिए मैंने इसके बजाय गुणों को परिभाषित करने के लिए कक्षाओं का उपयोग करने की कोशिश की। देखा! मक्खन के रूप में चिकना।

यह झिलमिलाहट का कारण बनता है:

$('#banner').css('backgroundImage', 'url("slide_1.jpg")';

इसके बजाय करें:

$('#banner').attr('class', '.slide-1');

परिभाषित वर्गों के साथ:

#banner { -webkit-transition: background-image .25s; }
.slide-1 { background-image: url("slide_1.jpg"); }
.slide-2 { background-image: url("slide_2.jpg"); }

Answer 11

इस समाधान की कोशिश करो । यह मेरे लिए Phonegap + jQM 1.4.0 में काम करता है :

इसे बदलो <meta name="viewport" content="width=device-width, initial-scale=1">

इसके बजाय:

<meta name="viewport" content="width=device-width, user-scalable=no" />

यहां पढ़ें: http://www.fishycode.com/post/40863390300/fixing-jquery-mobiles-none-transition-flicker-in

Answer 12

मैंने इस मुद्दे को एम्बर एनिमेटेड आउटलेट्स, फोनगैप और आईओएस के लिए जानने में बहुत समय बिताया था सेटअप के ।

हालांकि सरल, मुझे प्रत्येक शीर्ष-स्तरीय मूल तत्व में एक पृष्ठभूमि जोड़ना था जो सीएसएस एनिमेशन में शामिल था। दूसरे शब्दों में, सुनिश्चित करें कि आपके विचार में किसी भी बिंदु पर एक तत्व नहीं है जिसकी पृष्ठभूमि नहीं है।

मेरा सेटअप प्रत्येक टेम्पलेट के लिए यह था और सभी तीन तत्वों को एक पृष्ठभूमि रंग सौंपा गया था:

<header></header> <body class="content"></body> <footer></footer>

Answer 13

"सभी" के लिए संक्रमण को लागू करने के बजाय सिर्फ एक को निर्दिष्ट करें जो आपको वास्तव में चाहिए। इसने मेरे मामले पर फ़्लिकरिंग हटा दी।

Answer 14

मैंने उपरोक्त सभी की कोशिश की और अभी भी फ़ायरफ़ॉक्स और क्रोम पर बड़ी टिमटिमा रही थी। मैंने इसे ठीक कर दिया, या कम-से-कम इसे बॉक्स-छाया रूपांतरण को हटाकर एक स्वीकार्य मुद्दे पर कम कर दिया, जो एनीमेशन के दौरान कई repaints पैदा कर रहा था। मैंने इसका अनुसरण किया और अपनी आवश्यकताओं के लिए संशोधित किया:

http://tobiasahlin.com/blog/how-to-animate-box-shadow/

Answer 15

मेरे लिए, सफारी पर चंचल मुद्दा को हटाकर हल किया will-change: transform; लिए, एनिमेटेड तत्व को ।

मैं भी overflow: hidden;माता-पिता को जोड़कर इस मुद्दे को हल कर सकता हूं , लेकिन इसके साथ, सभी तत्व transform: translateZ()अप्रभावी हो गए

Answer 16

मुझे वास्तविक मूल्य (0 के बजाय) का उपयोग करना था:

.no-flick{
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform:translateZ(0.1px);
    transform: translateZ(0.1px); /* needs an actual value */
}

उदाहरण:

<div class="foo no-flick"></div>

मैंने जो पढ़ा है , उससे झिलमिलाहट ब्राउज़र के हार्डवेयर और सॉफ्टवेयर रेंडरिंग के बीच बदल जाती है। और मुझे लगता है कि ब्राउज़र निर्माता हार्डवेयर रेंडरिंग को बाध्य करने के लिए yea olde "Translate3d (0,0,0)" से अवगत हैं - इसलिए वे अब इन नकली मूल्यों की अनदेखी कर सकते हैं।

=> वास्तविक मूल्य का उपयोग करने से चीजें "छड़ी" हो सकती हैं।

वैसे भी, मेरे लिए काम किया।

Answer 17

मैंने डिफ़ॉल्ट एंड्रॉइड वेब ब्राउज़र का उपयोग करते समय स्लाइड संक्रमण करते समय झिलमिलाहट का अनुभव किया है।

मैंने निम्नलिखित संक्रमण सीएसएस का उपयोग किया है:

-webkit-transition: all 2s;
-webkit-transform: translate(100%,0);

इस सूत्र में वर्णित किसी भी प्रकार के वर्कअराउंड ने समस्या को हल करने में मदद नहीं की है। अंत में मुझे इसका हल मिल गया है। फ़्लिकरिंग का स्रोत सभी कीवर्ड हैं, जिसका अर्थ है कि सभी संभव संक्रमण करना। मैंने इसे केवल परिवर्तन करने के लिए बदल दिया है और समस्या हल हो गई है:

-webkit-transition: -webkit-transform 2s;
-webkit-transform: translate(100%,0);

Answer 18

ट्रांसफ़ॉर्म-ट्रांसलेट सीएसएस नियम के असाइनमेंट में देरी के लिए यह मेरे लिए तय था। कुछ इस तरह:

HTML:

<div class="animate-this loading"></div>

सीएसएस:

.animate-this {
  &:not(.loading) {
    transform: -webkit-translate(50px);
    transform: translate(50px);
    transition: -webkit-transform 0.3s, transform 0.3s;
  }
}

जावास्क्रिप्ट (jQuery):

$(document).ready(function(){
  window.setTimeout(function(){
    $('.animate-this').removeClass('loading');
  }, 250);
});

---

... क्योंकि मेरे लिए कुछ-webkit-backface-visibility: hidden; नहीं किया ।

Answer 19

इसलिए मुझे इस मुद्दे के लिए एक फ़िक्स मिला, जहाँ कोई भी अन्य ठीक से काम नहीं करता था।

सीएसएस:

.ios-animation-fixer {
  position: fixed;
  width: 100%;
  height: 10px;
  top: -10px;
  background-color: green;
  z-index: 1;
  pointer-events: none;
  visibility: hidden;
}

HTML:

<div class="ios-animation-fixer"></div>

फिर z-indexअपने एनिमेटेड तत्व के लिए सेट करें > 1. यह किसी भी तरह से आईओएस डिवाइस को एनीमेशन को अलग तरीके से प्रस्तुत करता है, और मेरे परिदृश्य में झिलमिलाहट से बचा जाता है। यदि यह समाधान गेट से बाहर काम नहीं करता है, तो जेड-इंडेक्स मानों को समायोजित करना मददगार हो सकता है।

Answer 20

UPDATE 2019

आप फ़्लिकरिंग को चालू कर सकते हैं बस इन नियमों को अपने तत्व में जोड़ सकते हैं जो संक्रमण पर उपयोग किया जाता है।

-webkit-transform: translate3d(0, 0, 0);

सफराई पर मेरे लिए काम किया