मैं वेबकीट को शैली परिवर्तन के प्रचार के लिए redraw / repaint करने के लिए कैसे बाध्य कर सकता हूं?

Question

शैली परिवर्तन को प्रभावित करने के लिए मेरे पास कुछ तुच्छ जावास्क्रिप्ट हैं:

sel = document.getElementById('my_id');
sel.className = sel.className.replace(/item-[1-9]-selected/,'item-1-selected');
return false;

यह एफएफ, ओपेरा और आईई के नवीनतम संस्करणों के साथ ठीक काम करता है, लेकिन क्रोम और सफारी के नवीनतम संस्करणों पर विफल रहता है।

यह दो वंशजों को प्रभावित करता है, जो भाई-बहन होते हैं। पहला भाई अपडेट करता है, लेकिन दूसरा नहीं करता है। दूसरे तत्व के एक बच्चे पर भी ध्यान केंद्रित होता है और इसमें <a> टैग होता है जिसमें एक ऑनक्लिक विशेषता में उपरोक्त कोड होता है ।

Chrome में "डेवलपर टूल" विंडो में अगर मैं किसी भी तत्व की किसी भी विशेषता को अनचेक (जैसे अनचेक और चेक) करता हूं , तो दूसरा सिबलिंग सही शैली में अपडेट करता है।

क्या सही तरीके से कार्य करने में वेबकिट को आसानी से "व्यवस्थित" करने के लिए वर्कअराउंड है?

Comments

मुझे लगता है कि जब मैं अपने कैनवास ऐप को वेब व्यू में लपेट रहा हूं, तो मुझे एंड्रॉइड 4.2.2 (सैमसंग I9500) पर यह समस्या आ रही है। हास्यास्पद!

— जोश

what-forces-layout.md एक बहुत अच्छी पढ़ने की जगह

— vsync

Answer 1

मुझे कुछ जटिल सुझाव मिले और बहुत से ऐसे सरल काम नहीं हुए, लेकिन वासिल डिंकोव की एक टिप्पणी ने रेडर / दमन को मजबूर करने के लिए एक सरल समाधान प्रदान किया जो ठीक काम करता है:

sel.style.display='none';
sel.offsetHeight; // no need to store this anywhere, the reference is enough
sel.style.display='';

अगर यह "ब्लॉक" के अलावा अन्य शैलियों के लिए काम करता है तो मैं किसी और को टिप्पणी करूँगा।

धन्यवाद, वासिल!

Comments

चंचलता से बचने के लिए आप कोशिश कर सकते हैं 'inline-block', 'table'या 'run-in'इसके बजाय 'none', लेकिन इसके दुष्प्रभाव हो सकते हैं। इसके अलावा, 0 का एक टाइमआउट केवल एक क्वेरी offsetHeightको ट्रिगर करता है जैसे कि क्वेरी करता है:sel.style.display = 'run-in'; setTimeout(function () { sel.style.display = 'block'; }, 0);

— user123444555621

यह उत्तर अभी भी 2 साल बाद उपयोगी है। मैंने इसका उपयोग केवल क्रोम-ओनली समस्या को ठीक करने के लिए किया था, जहां कुछ तरीकों से ब्राउज़र का आकार बदलने के बाद सीएसएस बॉक्स छाया स्क्रीन पर बनी रही। धन्यवाद!

— rkulla

@danorton आपने 2010 में जवाब दिया। यह 2013 है और बग अभी भी आसपास है। धन्यवाद। वैसे, किसी को पता है कि क्या कोई मुद्दा वेबकिट ट्रैकर में पंजीकृत है?

— राफेलडीडीएल

पुनश्च: मेरे लिए उपरोक्त समाधान अब और काम नहीं करता है। इसके बजाय मैंने इसका इस्तेमाल किया (jQuery): sel.hide ()। Show (0); स्रोत: stackoverflow.com/questions/8840580/…

— ProblemsOfSumit

आपको बस एक आकार की संपत्ति पढ़ने की ज़रूरत है, आपको इसे आगे और पीछे बदलने की ज़रूरत नहीं है।

— एंड्रयू बुलॉक

Answer 2

हमने हाल ही में इसका सामना किया और पता चला कि सीएसएस में ट्रांसलेट के साथ एक समग्र परत को प्रभावित तत्व को बढ़ावा देने के लिए अतिरिक्त जावास्क्रिप्ट की आवश्यकता के बिना समस्या को तय किया।

.willnotrender { 
   transform: translateZ(0); 
}

जैसा कि ये पेंटिंग मुद्दे ज्यादातर वेबकिट / ब्लिंक में दिखाई देते हैं, और यह फिक्स ज्यादातर वेबकिट / ब्लिंक को लक्षित करता है, यह कुछ मामलों में बेहतर है। विशेष रूप से स्वीकार किए जाते हैं उत्तर के बाद से लगभग निश्चित रूप से एक reflow और repaint का कारण बनता है , न कि केवल एक repaint।

वेबकिट और ब्लिंक प्रदर्शन प्रस्तुत करने पर कड़ी मेहनत कर रहे हैं, और इस प्रकार के ग्लिट्स अनुकूलन के दुर्भाग्यपूर्ण दुष्प्रभाव हैं जो अनावश्यक प्रवाह और पेंट को कम करने का लक्ष्य रखते हैं। सीएसएस विल-चेंज या एक अन्य सफल विनिर्देश भविष्य का समाधान होगा, सबसे अधिक संभावना है।

एक संयुक्त परत को प्राप्त करने के अन्य तरीके हैं, लेकिन यह सबसे आम है।

Comments

कोणीय-हिंडोला का उपयोग करते समय मेरे लिए काम किया !

— gustavohenke

मेरा मुद्दा तय किया जहां सीमा-त्रिज्या एक स्लाइडिंग पैनल के अंदर एक तत्व में खो गया था

— टिमो

कॉर्डोवा परियोजनाओं के लिए भी काम करता है!

— क्विश्ची

मेरे लिए काम किया एक -webkit- लाइन-क्लैंप कि ताज़ा नहीं किया

— एडम मार्शल

मेरे लिए ipad (6.0) -webkit- परिवर्तन: अनुवाद (-50%, -50%) पर काम किया।

— Lain

Answer 3

danorton समाधान मेरे लिए काम नहीं किया। मुझे कुछ वास्तव में अजीब समस्याएं थीं जहां वेबकिट कुछ तत्वों को बिल्कुल भी आकर्षित नहीं करेगा; जहां इनपुट में पाठ onblur तक अपडेट नहीं किया गया था; और क्लासनेम बदलने से परिणाम नहीं मिलेगा।

मेरा समाधान, मुझे गलती से पता चला, स्क्रिप्ट के बाद शरीर में एक खाली शैली तत्व जोड़ना था।

<body>
...
<script>doSomethingThatWebkitWillMessUp();</script>
<style></style>
...

यह तय है। कितना अजीब है? आशा है कि यह किसी के लिए उपयोगी है।

Comments

अगर मैं कर सकता तो मैं 1,000,000 गुना बढ़ा देता। यह एकमात्र तरीका है जिससे मैं एक बेवकूफ डिव को फिर से आकर्षित करने के लिए क्रोम प्राप्त कर सकता हूं जिसे मैं चारों ओर खींच रहा था। वैसे, आपको स्टाइल एलिमेंट नहीं जोड़ना है (कम से कम मैंने ऐसा नहीं किया है) कोई भी एलीमेंट काम करेगा। मैंने एक div बनाया और उसे एक आईडी दी जिससे मैं डिलीट कर सकता था और फिर प्रत्येक स्टेप पर एलिमेंट जोड़ सकता था, ताकि डोम को बेकार टैग से न भरें।

— hobberwickey

बस एक और जवाब पर Pumbaa80 की टिप्पणी के साथ इस मिश्रित का उपयोग किया। मैंने जिस फिक्स को खत्म किया वह थाvar div = $('<div>').appendTo(element); setTimeout(function(){ div.remove(); }, 0);

— बेंडमैन

यह सिंगल लाइन मेरे लिए बहुत अच्छा काम कर रही है! $('<style></style>').appendTo($(document.body)).remove();

— pdelanauze

@pdelanauze उत्तर सही काम करता है। मैं एक redraw समस्या है css3 अनुवाद और ios में रूपांतरण गाओ।

— मार्सेल फॉलियर

बस यह जानते हैं कि यह पूरे पृष्ठ के एक दमनकारी को मजबूर करता है, जबकि अधिकांश समय आप केवल पृष्ठ के एक निश्चित भाग को फिर से प्राप्त करना चाहते हैं ...

— रयान व्हेले

Answer 4

चूंकि प्रदर्शन + ऑफसेट ट्रिगर ने मेरे लिए काम नहीं किया, मुझे यहां एक समाधान मिला:

http://mir.aculo.us/2009/09/25/force-redraw-dom-technique-for-webkit-based-browsers/

अर्थात

element.style.webkitTransform = 'scale(1)';

Comments

मैंने इसे एक हैक में इस्तेमाल किया था जिसे मैं कोशिश कर रहा था, लेकिन इसके बजाय scale(1), मैंने इसे खुद को सौंपा element.style.webkitTransform = element.style.webkitTransform। इसके होने का कारण यह है कि इसे पूर्व में सेट करना पृष्ठ को पोस्ट किए गए absoluteतत्वों के लिए थोड़ा विकृत कर रहा था !

— bPratik

इसने मेरे लिए काम किया, और समस्या को हल करने या स्क्रॉल की स्थिति को रीसेट करने में समस्या नहीं हुई जो displayसमाधान किया।

— दाविदबर्तन

मेरे पास बहुत सारे गतिशील एसवीजी का उपयोग करके एक कॉर्डोवा ऐप था। IOS7 को छोड़कर हर जगह ठीक काम किया, जहां अगर स्टार्टअप पर एसवीजी तत्व प्रदर्शित नहीं होंगे। एक साधारण $ ('शरीर') जोड़ा गया [0] .style.webkitTransform = 'स्केल (1)'; प्रारंभिक कोड और समस्या गायब हो गई!

— हर्क

यह अभी नवीनतम सफारी और आईओएस पर काम नहीं कर रहा है।

— सेटहोपोलसस

@setholopolus कौन सा छंद है?

— एरिका

Answer 5

मैं उसी मुद्दे को भुगत रहा था। जब मेरे एनीमेशन के स्टेप फंक्शन में जोड़ा गया तो डैनॉर्टन के 'टॉगल डिस्प्ले' फिक्स ने मेरे लिए काम किया लेकिन मैं प्रदर्शन को लेकर चिंतित था और मैंने अन्य विकल्पों की तलाश की।

मेरी परिस्थिति में जो तत्व निरस्त नहीं हो रहा था, वह एक बिल्कुल स्थिति तत्व था जो उस समय नहीं था, एक z- इंडेक्स है। इस तत्व में एक z- इंडेक्स जोड़ने से क्रोम का व्यवहार बदल गया और प्रत्यावर्तन उम्मीद के मुताबिक हुआ -> एनिमेशन सहज हो गए।

मुझे संदेह है कि यह एक रामबाण है, मुझे लगता है कि यह निर्भर करता है कि क्रोम ने तत्व को फिर से तैयार करने के लिए क्यों नहीं चुना है लेकिन मैं इस विशिष्ट समाधान को यहां पोस्ट कर रहा हूं मदद में यह किसी को उम्मीद है।

चीयर्स, रोब

tl; dr >> तत्व या माता-पिता के लिए एक z-index जोड़ने का प्रयास करें।

Comments

प्रतिभाशाली। यह भयानक है और मेरे लिए समस्या तय है। A +++ फिर से z- इंडेक्स करेगा।

— ट्रिसवेब

स्क्रॉल-बार और ट्रांसफ़ॉर्म से निपटने में मेरी स्थिति में काम नहीं किया।

— रिकी बॉयस

Answer 6

निम्नलिखित कार्य करता है। इसे केवल शुद्ध CSS में एक बार सेट करना होगा। और यह जेएस फ़ंक्शन की तुलना में अधिक मज़बूती से काम करता है। प्रदर्शन अप्रभावित लगता है।

@-webkit-keyframes androidBugfix {from { padding: 0; } to { padding: 0; }}
body { -webkit-animation: androidBugfix infinite 1s; }

Comments

लगता है यह मेरे लिए भी काम कर रहा है। मोबाइल सफारी के साथ एक प्रतिपादन मुद्दे को ठीक करने के लिए इसका इस्तेमाल किया

— क्रिस

यह मेरा मुद्दा ठीक करता है, सफारी को रिलेआउट करने के लिए मजबूर करता है। हालाँकि, मैंने zoomपैडिंग के बजाय उपयोग किया :@-webkit-keyframes safariBugFix {from { zoom: 100%; } to { zoom: 99.99999%; }}

— अहमद मुसल्लम

Answer 7

किसी कारण से मैं काम करने के लिए डैनॉर्टन का जवाब नहीं पा सका, मैं देख सकता था कि यह क्या करना चाहिए था इसलिए मैंने इसे इसके लिए थोड़ा छोटा किया:

$('#foo').css('display', 'none').height();
$('#foo').css('display', 'block');

और यह मेरे लिए काम किया।

Comments

मैंने इसके ऊपर सब कुछ करने की कोशिश की, लेकिन केवल इसने मेरे लिए काम किया। डब्ल्यूटीएफ वेबकिट! यह कंप्यूटर विज्ञान नहीं है! यह काला जादू है!

— चार्ली मार्टिन

Answer 8

मैं यहाँ आया था क्योंकि मुझे अपनी सीएसएस को बदलने के बाद क्रोम में स्क्रॉलबार को फिर से बनाने की आवश्यकता थी।

अगर किसी को यही समस्या है, तो मैंने इस फ़ंक्शन को कॉल करके इसे हल किया:

//Hack to force scroll redraw
function scrollReDraw() {
    $('body').css('overflow', 'hidden').height();
    $('body').css('overflow', 'auto');
}

यह विधि सबसे अच्छा समाधान नहीं है, लेकिन यह सब कुछ के साथ काम कर सकता है, उस तत्व को छिपा सकता है और दिखा सकता है जिसे फिर से तैयार करने की आवश्यकता है जो हर समस्या को हल कर सकता है।

यहाँ वह फिडेल है जहाँ मैंने इसका उपयोग किया है: http://jsfiddle.net/promatik/wZwJz/18/

Comments

महान! मैं भी स्क्रॉलबार चेतन करने की कोशिश कर रहा था और यही मुझे चाहिए था! Btw बेहतर उपयोग अतिप्रवाह: एनिमेटेड स्क्रॉलबार के लिए ओवरले

— ekalchev

Answer 9

मैंने आज इस पर ठोकर खाई: प्रोटोटाइप.जेएस के लिए Element.redraw ()

का उपयोग करते हुए:

Element.addMethods({
  redraw: function(element){
    element = $(element);
    var n = document.createTextNode(' ');
    element.appendChild(n);
    (function(){n.parentNode.removeChild(n)}).defer();
    return element;
  }
});

हालांकि, मैंने कभी-कभी ध्यान दिया है कि आपको समस्याग्रस्त तत्व पर सीधे redraw () कॉल करना होगा। कभी-कभी मूल तत्व को फिर से तैयार करने से उस समस्या का समाधान नहीं होगा जो बच्चा अनुभव कर रहा है।

ब्राउज़रों के तत्वों को प्रस्तुत करने के तरीके के बारे में अच्छा लेख: प्रतिपादन: पुनर्वित्त, रीफ़्लो / रिलेआउट, रेस्टाइल

Comments

appendChildएक DOM विधि है, एक jQuery विधि नहीं है।

— क्रिस डब्ल्यूटी

Answer 10

मेरे पास यह समस्या थी कि कितने डिवीजनों के साथ एक और div position: absoluteमें डाला गया था, सम्मिलित divs में कोई स्थिति विशेषता नहीं थी। जब मैंने position:relativeइसे बदल दिया तो यह ठीक काम कर गया। (समस्या को इंगित करने के लिए वास्तव में कठिन था)

मेरे मामले में एंगुलर द्वारा सम्मिलित किए जाने वाले तत्व ng-repeat।

Comments

धन्यवाद! यह मेरे मुद्दे के लिए भी काम किया है, और एक बहुत अधिक हल्के वजन है कि ऊपर जावास्क्रिप्ट समाधान का एक बहुत।

— Dsyko

Answer 11

मुझे विश्वास नहीं हो रहा है कि यह अभी भी 2014 में एक समस्या है। मैं सिर्फ इस मुद्दे पर था जब स्क्रॉल करते समय पृष्ठ के निचले-बाएँ हाथ पर एक निश्चित स्थिति कैप्शन बॉक्स को ताज़ा करते हुए, कैप्शन स्क्रीन को 'भूत' कर देगा। सफलता के बिना ऊपर सब कुछ करने की कोशिश करने के बाद, मैंने देखा कि बहुत सारी चीजें बहुत धीमी थीं / बहुत ही कम डोम रिले बनाने के कारण मुद्दे थे, कुछ अप्राकृतिक भावना स्क्रॉलिंग आदि के कारण ...

मैंने एक निश्चित स्थिति बनाते हुए, पूर्ण आकार के डिव के साथ pointer-events: noneऔर उस तत्व के लिए डैनॉर्टन के उत्तर को लागू किया, जो डोम के साथ हस्तक्षेप किए बिना पूरे स्क्रीन पर एक रीड्रा को मजबूर करने के लिए लगता है।

HTML:

<div id="redraw-fix"></div>

सीएसएस:

div#redraw-fix {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 25;
    pointer-events: none;
    display: block;
}

जे एस:

sel = document.getElementById('redraw-fix');
sel.style.display='none';
sel.offsetHeight; // no need to store this anywhere, the reference is enough
sel.style.display='block';

Comments

मैं आपको अपने वर्कअराउंड के लिए पर्याप्त रूप से धन्यवाद नहीं दे सकता हूं जो मेरे लिए काम करने वाला एकमात्र है। हाँ, यह २०१ the है और इस मुद्दे पर चर्चा जारी है। मेरी समस्या आरटीएल भाषा के पेज से संबंधित थी, जो एंड्रॉइड मोबाइल उपकरणों पर मैन्युअल रूप से ताज़ा होने पर रिक्त रेंडर करता है। z-indexऔर pointer-eventsनियम यहाँ ज़रूरत से ज़्यादा हैं।

— अमीन मोजाफ़री

मैंने पहले डैनॉर्टन के फिक्स का उपयोग किया है लेकिन वास्तव में सामग्री की फ्लैश के साथ प्रदर्शन से लेकर कोई भी नहीं के साथ संघर्ष कर रहा था। आपके समाधान ने मेरे लिए बिना किसी सामग्री फ्लैश के शानदार काम किया!

— जस्टिन नोएल

Answer 12

ऐसा नहीं है कि इस प्रश्न को किसी अन्य उत्तर की आवश्यकता है, लेकिन मैंने पाया कि रंग बदलने से एक ही बार में मुझे एक विशेष परिस्थिति में एक दमित को मजबूर होना पड़ा।

//Assuming black is the starting color, we tweak it by a single bit
elem.style.color = '#000001';

//Change back to black
setTimeout(function() {
    elem.style.color = '#000000';
}, 0);

setTimeoutवर्तमान घटना पाश के बाहर दूसरी शैली परिवर्तन स्थानांतरित करने के लिए महत्वपूर्ण साबित हुआ।

Comments

0 की समयावधि सेट करना मेरे लिए एक अलग लेकिन समान स्थिति में उपयोगी साबित हुआ। इससे पहले कि यह एक बड़े रूप में पार्स हुआ स्क्रीन विगलित होने के कारण रेड्रॉव नहीं चल रहा था। सोचा था कि अगर कोई उसी स्थिति में है तो मैं उस पर टिप्पणी करूंगा। इस परिदृश्य में अन्य समाधान काम नहीं किए।

— k29

Answer 13

मेरे लिए एकमात्र समाधान sowasred2012 के उत्तर के समान है:

$('body').css('display', 'table').height();
$('body').css('display', 'block');

मेरे पास पृष्ठ पर बहुत अधिक समस्या वाले ब्लॉक हैं, इसलिए मैं displayरूट तत्व की संपत्ति को बदल देता हूं । और मैं display: table;इसके बजाय का उपयोग करता हूं display: none;, क्योंकि noneस्क्रॉलिंग ऑफसेट रीसेट करेगा।

Answer 14

मैं transform: translateZ(0);विधि का उपयोग करता हूं लेकिन कुछ मामलों में यह पर्याप्त नहीं है।

मैं एक वर्ग को जोड़ने और हटाने का प्रशंसक नहीं हूं, इसलिए मैंने इसे हल करने का तरीका खोजने की कोशिश की और एक नई हैक के साथ समाप्त हुआ जो अच्छी तरह से काम करती है:

@keyframes redraw{
    0% {opacity: 1;}
    100% {opacity: .99;}
}

// ios redraw fix
animation: redraw 1s linear infinite;

Answer 15

चूँकि हर किसी की अपनी समस्याएँ और समाधान हैं, मुझे लगा कि मैं कुछ ऐसा काम करूँगा जो मेरे लिए काम करे। वर्तमान क्रोम के साथ एंड्रॉइड 4.1 पर, ओवरफ्लो के साथ एक कैनवास के अंदर एक कैनवास को खींचने की कोशिश कर रहा है: छिपा हुआ है, मुझे तब तक कोई रीड्रा नहीं मिल सकता जब तक कि मैं मूल डिव के लिए एक तत्व नहीं जोड़ता (जहां यह कोई नुकसान नहीं करेगा)।

var parelt = document.getElementById("parentid");
var remElt = document.getElementById("removeMe");
var addElt = document.createElement("div");
addElt.innerHTML = " "; // Won't work if empty
addElt.id="removeMe";
if (remElt) {
    parelt.replaceChild(addElt, remElt);
} else {
    parelt.appendChild(addElt);
}

कोई स्क्रीन झिलमिलाहट या वास्तविक अद्यतन, और खुद के बाद सफाई नहीं। कोई भी वैश्विक या वर्ग स्कोप नहीं किया गया, बस स्थानीय लोग। मोबाइल सफारी / iPad या डेस्कटॉप ब्राउज़र पर कुछ भी चोट नहीं लगती है।

Answer 16

मैं आयनिक एचटीएमएल 5 ऐप पर काम कर रहा हूं, कुछ स्क्रीन पर मैंने absoluteएलिमेंट डाला है, जब आईओएस डिवाइस (आईफोन 4,5,6, 6+) में स्क्रॉल डाउन या डाउन होता है, तो मेरे पास रिपर्ट बग था।

कई समाधान की कोशिश की उनमें से कोई भी काम नहीं कर रहा था सिवाय मेरी समस्या को हल करने के।

मैं .fixRepaintउन निरपेक्ष पदों तत्वों पर सीएसएस क्लास का उपयोग करता हूं

.fixRepaint{
    transform: translateZ(0);
}

इसने मेरी समस्या को ठीक कर दिया है, यह कुछ मदद कर सकता है

Comments

कुछ मैं कैसे नहीं देखा है कि ऑप्स। @morewry इशारा करने के लिए धन्यवाद

— अंजुम .... 7

Answer 17

यह जेएस के लिए ठीक है

sel.style.display='none';
sel.offsetHeight; // no need to store this anywhere, the reference is enough
sel.style.display='block';

लेकिन Jquery में, और विशेष रूप से जब आप केवल $ (दस्तावेज़) का उपयोग कर सकते हैं। पहले से ही और किसी विशेष कारण से किसी वस्तु के .लोड घटना के लिए बाध्य नहीं कर सकते हैं, तो निम्नलिखित काम करेगा।

आपको ऑब्जेक्ट्स / divs के OUTER (MOST) कंटेनर को प्राप्त करने की आवश्यकता है और फिर इसकी सभी सामग्रियों को एक चर में हटा दें, फिर इसे जोड़ें। यह बाहरी कंटेनर के भीतर किए गए सभी परिवर्तनों को दिखाई देगा।

$(document).ready(function(){
    applyStyling(object);
    var node = $("div#body div.centerContainer form div.centerHorizontal").parent().parent();
    var content = node.html();
    node.html("");
    node.html(content);
}

Answer 18

मुझे यह विधि उपयोगी लगी है जब संक्रमण के साथ काम करना

$element[0].style.display = 'table'; 
$element[0].offsetWidth; // force reflow
$element.one($.support.transition.end, function () { 
    $element[0].style.display = 'block'; 
});

Answer 19

"डिस्प्ले / ऑफसेटहाइट" हैक ने मेरे मामले में काम नहीं किया, कम से कम जब यह तत्व को एनिमेटेड किया जा रहा था तब लागू किया गया था।

मेरे पास एक ड्रॉपडाउन मेनू था जो पृष्ठ सामग्री पर खुला / बंद हो रहा था। मेनू बंद होने के बाद (केवल वेबकिट ब्राउज़रों में) कलाकृतियों को पृष्ठ सामग्री पर छोड़ा जा रहा था। "डिस्प्ले / ऑफसेटहाइट" हैक काम करने का एकमात्र तरीका अगर मैंने इसे शरीर पर लागू किया, जो बुरा लगता है।

हालाँकि, मुझे एक और उपाय मिला:

1. इससे पहले कि तत्व ऐनिमेट करना शुरू कर दे, एक वर्ग जोड़ें जो "-bbkit-backface-दृश्यता: छिपा हुआ" को परिभाषित करता है; तत्व पर (आप इनलाइन शैली का भी उपयोग कर सकते हैं, मुझे लगता है)
2. जब यह एनिमेट किया जाता है, तो कक्षा को हटा दें (या शैली)

यह अभी भी बहुत हैकरी है (यह हार्डवेयर रेंडरिंग को बाध्य करने के लिए CSS3 की संपत्ति का उपयोग करता है), लेकिन कम से कम यह केवल प्रश्न में तत्व को प्रभावित करता है, और पीसी और मैक पर सफारी और क्रोम दोनों पर मेरे लिए काम करता है।

Answer 20

यह इस से संबंधित लगता है: सफारी में jQuery की शैली लागू नहीं की जा रही है

पहली प्रतिक्रिया में सुझाए गए समाधान ने इन परिदृश्यों में मेरे लिए अच्छा काम किया है, अर्थात्: स्टाइल परिवर्तन करने के बाद शरीर के लिए एक डमी क्लास को लागू करें और निकालें:

$('body').addClass('dummyclass').removeClass('dummyclass');

यह सफारी को फिर से तैयार करने के लिए मजबूर करता है।

Comments

क्रोम में काम करने के लिए मुझे इसे जोड़ना था: $ ('शरीर')। addClass ('dummass'))। देरी (0) .removeClass ('dummyclass');

— mbokil

Answer 21

उपरोक्त सुझाव मेरे लिए काम नहीं किया। लेकिन नीचे एक करता है।

एंकर के अंदर पाठ को गतिशील रूप से बदलना चाहते हैं। शब्द "खोज"। एक आईडी विशेषता के साथ एक आंतरिक टैग "फ़ॉन्ट" बनाया गया। जावास्क्रिप्ट (नीचे) का उपयोग कर सामग्री प्रबंधित

खोज

स्क्रिप्ट सामग्री:

    var searchText = "Search";
    var editSearchText = "Edit Search";
    var currentSearchText = searchText;

    function doSearch() {
        if (currentSearchText == searchText) {
            $('#pSearch').panel('close');
            currentSearchText = editSearchText;
        } else if (currentSearchText == editSearchText) {
            $('#pSearch').panel('open');
            currentSearchText = searchText;
        }
        $('#searchtxt').text(currentSearchText);
    }

Answer 22

मैं एक एसवीजी के साथ एक समस्या थी जो एंड्रॉइड के लिए क्रोम पर गायब हो रही थी जब कुछ परिस्थितियों में अभिविन्यास को बदल दिया गया था। नीचे दिया गया कोड इसे पुन: पेश नहीं करता है, लेकिन सेटअप हमारे पास है।

body {
  font-family: tahoma, sans-serif;
  font-size: 12px;
  margin: 10px;
}
article {
  display: flex;
}
aside {
  flex: 0 1 10px;
  margin-right: 10px;
  min-width: 10px;
  position: relative;
}
svg {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.backgroundStop1 {
  stop-color: #5bb79e;
}
.backgroundStop2 {
  stop-color: #ddcb3f;
}
.backgroundStop3 {
  stop-color: #cf6b19;
}

<article>
  <aside>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" width="100%">
      <defs>
        <linearGradient id="IndicatorColourPattern" x1="0" x2="0" y1="0" y2="1">
          <stop class="backgroundStop1" offset="0%"></stop>
          <stop class="backgroundStop2" offset="50%"></stop>
          <stop class="backgroundStop3" offset="100%"></stop>
        </linearGradient>
      </defs>
      <rect x="0" y="0" rx="5" ry="5" width="100%" height="100%" fill="url(#IndicatorColourPattern)"></rect>
    </svg>
  </aside>
  <section>
    <p>Donec et eros nibh. Nullam porta, elit ut sagittis pulvinar, lacus augue lobortis mauris, sed sollicitudin elit orci non massa. Proin condimentum in nibh sed vestibulum. Donec accumsan fringilla est, porttitor vestibulum dolor ornare id. Sed elementum
      urna sollicitudin commodo ultricies. Curabitur tristique orci et ligula interdum, eu condimentum metus eleifend. Nam libero augue, pharetra at maximus in, pellentesque imperdiet orci.</p>
    <p>Fusce commodo ullamcorper ullamcorper. Etiam eget pellentesque quam, id sodales erat. Vestibulum risus magna, efficitur sed nisl et, rutrum consectetur odio. Sed at lorem non ligula consequat tempus vel nec risus.</p>
  </section>
</article>

दिन और बाद में poking और उकसा रही है और के साथ खुश नहीं के बाद आधा hacky यहां पेश किए समाधानों से , मुझे पता चला कि यह मुद्दा इस तथ्य के कारण था कि यह एक नया ड्राइंग करते समय तत्व को स्मृति में रखता था। समाधान एसवीजी पर रेखीयग्रैडिएंट की आईडी को अद्वितीय बनाने के लिए था, भले ही यह प्रति पृष्ठ केवल एक बार उपयोग किया गया था।

यह कई अलग-अलग तरीकों से प्राप्त किया जा सकता है, लेकिन हमारे कोणीय ऐप के लिए हमने स्कोप को एक चर जोड़ने के लिए अनूठे फ़ंक्शन का उपयोग किया है:

कोणीय निर्देश (JS):

scope.indicatorColourPatternId = _.uniqueId('IndicatorColourPattern');

HTML अपडेट:

पंक्ति 5: <linearGradient ng-attr-id="{{indicatorColourPatternId}}" x1="0" x2="0" y1="0" y2="1">

पंक्ति 11: <rect x="0" y="0" rx="5" ry="5" width="100%" height="100%" ng-attr-fill="url(#{{indicatorColourPatternId}})"/>

मुझे आशा है कि यह उत्तर किसी और को उनके कीबोर्ड को फेस करने के लायक एक दिन बचाता है।

Answer 23

मैं एक reflow मजबूर करने के लिए एक कम hackish और अधिक औपचारिक तरीके की सिफारिश करेंगे: forceDOMReflowJS का उपयोग करें । आपके मामले में, आपका कोड निम्नानुसार होगा।

sel = document.getElementById('my_id');
forceReflowJS( sel );
return false;

Answer 24

मैंने पाया कि तत्व में केवल एक सामग्री शैली जोड़ने से इसे फिर से दबाने के लिए मजबूर किया गया है, यह हर बार जब आप इसे फिर से तैयार करना चाहते हैं तो एक अलग मूल्य होना चाहिए और छद्म तत्व पर होने की आवश्यकता नहीं है।

.selector {
    content: '1'
}

Answer 25

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

var get_safe_value = function(elm,callback){
    var sty = elm.style
    sty.transform = "translateZ(1px)";
    var ret = callback(elm)//you can get here the value you want
    sty.transform = "";
    return ret
}
// for safari to have the good clientWidth
var $fBody = document.body //the element you need to fix
var clientW = get_safe_value($fBody,function(elm){return $fBody.clientWidth})

यह वास्तव में अजीब है, क्योंकि अगर मैं get_safe_value के बाद clientWidth प्राप्त करने के लिए पुन: प्रयास करें, मैं सफारी के साथ एक बुरा मान प्राप्त, गेटर के बीच हो गया है sty.transform = "translateZ(1px)"; औरsty.transform = "";

निश्चित रूप से काम करने वाला दूसरा उपाय है

var $fBody = document.body //the element you need to fix
$fBody.style.display = 'none';
var temp = $.body.offsetHeight;
$fBody.style.display = ""
temp = $.body.offsetHeight;

var clientW = $fBody.clientWidth

समस्या यह है कि आप ध्यान केंद्रित करते हैं और राज्यों को स्क्रॉल करते हैं।

Answer 26

यह झिलमिलाहट से बचने के लिए मजबूर करेगा, मौजूदा तत्व छेड़छाड़ और किसी भी लेआउट मुद्दे ...

function forceRepaint() {
    requestAnimationFrame(()=>{
      const e=document.createElement('DIV');
      e.style='position:fixed;top:0;left:0;bottom:0;right:0;background:#80808001;\
               pointer-events:none;z-index:9999999';
      document.body.appendChild(e);
      requestAnimationFrame(()=>e.remove());  
    });
}

Answer 27

Jquery के साथ एक सरल समाधान:

$el.html($el.html());

या

element.innerHTML = element.innerHTML;

एक SVG था जो HTML में जोड़े जाने पर प्रदर्शित नहीं हो रहा था।

यह स्क्रीन पर svg तत्वों के होने के बाद जोड़ा जा सकता है।

बेहतर समाधान का उपयोग करना है:

document.createElementNS('http://www.w3.org/2000/svg', 'svg');

और jQuery के साथ:

$(svgDiv).append($(document.createElementNS('http://www.w3.org/2000/svg', 'g'));

यह क्रोम पर सही ढंग से प्रस्तुत करेगा।

Comments

इस दृष्टिकोण के साथ समस्या यह है कि आप ऑब्जेक्ट या इसके वंश पर पंजीकृत किसी भी घटना संचालकों को ढीला कर देते हैं।

— हाका