फ़ोर्स DOM redraw / Chrome / Mac पर रीफ़्रेश करें

215

हर बार एक समय में, Chrome पूरी तरह से मान्य HTML / CSS को गलत तरीके से प्रस्तुत करेगा या बिल्कुल नहीं करेगा। DOM इंस्पेक्टर के माध्यम से खुदाई करना अक्सर इसे अपने तरीके और त्रुटि को सही ढंग से महसूस करने के लिए प्राप्त करने के लिए पर्याप्त होता है, इसलिए यह साबित होता है कि मार्कअप अच्छा है। ऐसा अक्सर होता है (और अनुमानित रूप से) एक परियोजना में पर्याप्त है जिस पर मैं काम कर रहा हूं, मैंने कुछ परिस्थितियों में एक redraw को मजबूर करने के लिए कोड डाल दिया है।

यह अधिकांश ब्राउज़र / ओएस संयोजन में काम करता है:

    el.style.cssText += ';-webkit-transform:rotateZ(0deg)'
    el.offsetHeight
    el.style.cssText += ';-webkit-transform:none'

के रूप में, कुछ अप्रयुक्त सीएसएस संपत्ति को ट्विस्ट करें, फिर कुछ जानकारी मांगें जो एक redraw को मजबूर करती है, फिर संपत्ति को अनटेक करें। दुर्भाग्य से, मैक के लिए क्रोम के पीछे की उज्ज्वल टीम को लगता है कि बिना किसी बदलाव के उस ऑफसेट को प्राप्त करने का एक तरीका मिल गया है। इस प्रकार एक अन्यथा उपयोगी हैक को मारना।

इस प्रकार अब तक, Chrome / Mac पर समान प्रभाव पाने के लिए मैं सबसे अच्छा आया हूं, यह कुरूपता का टुकड़ा है:

    $(el).css("border", "solid 1px transparent");
    setTimeout(function()
    {
        $(el).css("border", "solid 0px transparent");
    }, 1000);

के रूप में, वास्तव में तत्व को थोड़ा कूदने के लिए मजबूर करते हैं, फिर एक सेकंड चिल करें और इसे वापस कूदें। इसे बदतर बनाते हुए, यदि आप उस टाइमआउट को 500ms (जहां यह कम ध्यान देने योग्य होगा) से नीचे छोड़ते हैं, तो इसका अक्सर वांछित प्रभाव नहीं होता है, क्योंकि ब्राउज़र को इसकी मूल स्थिति में वापस जाने से पहले इसे पुनः प्राप्त करने के लिए चारों ओर नहीं मिलेगा।

कोई भी इस redraw / रिफ्रेश हैक के बेहतर संस्करण की पेशकश करने के लिए परवाह करता है (अधिमानतः पहले उदाहरण के आधार पर) जो Chrome / Mac पर काम करता है?

javascript  css  macos  dom  google-chrome 
— जेसन केस्टर
स्रोत
मैं कुछ मिनट पहले उसी समस्या में भाग गया था। मैं एक div के लिए तत्व को बदल देता हूं (यह एक अवधि थी) और अब ब्राउज़र परिवर्तनों को सही ढंग से फिर से बताता है। मुझे पता है कि यह थोड़ा पुराना है, लेकिन इससे मुझे लगता है कि इससे कुछ नुकसान हो सकता है।
— एंड्रेस टोरेस
2
कृपया अस्पष्टता से संबंधित जवाब नीचे देखें। 0.99 - यहाँ सबसे अच्छा उत्तर है - लेकिन यह पेज पर इतना गहरा है कि इसे खोजना आसान नहीं है।
— ग्रोचल
1
यह Linux पर भी होता है :-(
— schlingel
1
आप टाइमआउट को एक अनुरोध के रूप में बदल सकते हैं। नामकरण, जिस स्थिति में आप एक ही चीज हासिल करेंगे, लेकिन 1000ms के बजाय 16ms के अंतराल के साथ।
— त्रिकूट
3
कृपया अमान्य रेंडरिंग के लिए क्रोमियम समस्या दर्ज करें । ऐसा प्रतीत होता है कि किसी ने भी ऐसा नहीं किया है, इसके बावजूद 4 साल पहले।
— बर्डी हार्बरो

जवाबों:

183

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

// in jquery
$('#parentOfElementToBeRedrawn').hide().show(0);

// in plain js
document.getElementById('parentOfElementToBeRedrawn').style.display = 'none';
document.getElementById('parentOfElementToBeRedrawn').style.display = 'block';

यदि यह सरल रीड्रा काम नहीं करता है तो आप इसे आज़मा सकते हैं। यह एक खाली पाठ नोड को उस तत्व में सम्मिलित करता है जो एक रीड्रा की गारंटी देता है।

var forceRedraw = function(element){

    if (!element) { return; }

    var n = document.createTextNode(' ');
    var disp = element.style.display;  // don't worry about previous display style

    element.appendChild(n);
    element.style.display = 'none';

    setTimeout(function(){
        element.style.display = disp;
        n.parentNode.removeChild(n);
    },20); // you can play with this timeout to make it as short as possible
}

EDIT: asime Vidas के जवाब में हम यहां जो हासिल कर रहे हैं वह एक मजबूर रिफ्लो होगा। आप स्वयं गुरु से अधिक जानकारी प्राप्त कर सकते हैं http://paulirish.com/2011/dom-html5-css3-performance/

— Juank
स्रोत
3
अफाक, केवल व्यूपोर्ट के एक हिस्से को फिर से बनाना संभव नहीं है। ब्राउज़र हमेशा पूरे वेब-पेज को फिर से बनाता है।
— 13इम विद
38
$ के बजाय ('# parentOfElementToBeRedrawn') छिपाना ()। दिखाना (); मुझे क्रोम में ठीक से काम करने के लिए .hide.show (0) की आवश्यकता है
— l.poellabauer
1
@ l.poellabauer वही यहाँ - यह कोई मतलब नहीं है ... लेकिन धन्यवाद। आपको कैसे पता चला ??? :)
— JohnIdol
6
FYI करें, मैं जिस प्रासंगिक क्षेत्र पर काम कर रहा था वह एक अनंत स्क्रॉल सूची थी। पूरे यूएल को छिपाने / दिखाने के लिए यह थोड़ा अस्थिर था, इसलिए मैंने चारों ओर खेला और पाया कि यदि आप किसी भी तत्व .hide().show(0)पर काम करते हैं (मैंने पृष्ठ पाद लेख चुना) तो इसे पृष्ठ को ताज़ा करना चाहिए।
— ट्रीफेस
1
व्यूपोर्ट के केवल एक हिस्से को फिर से बनाना संभव है। ऐसा करने के लिए कोई एपीआई नहीं है, लेकिन ब्राउज़र ऐसा करने का विकल्प चुन सकता है। व्यूपोर्ट को शुरू करने के लिए टाइलों में चित्रित किया गया है। और मिश्रित परतों को स्वतंत्र रूप से चित्रित किया जाता है।
— मोरेवारी
62

उपरोक्त में से किसी भी उत्तर ने मेरे लिए काम नहीं किया। मैंने नोटिस किया कि मेरी खिड़की का आकार बदलने से एक लाल रंग पैदा हुआ। तो यह मेरे लिए यह किया है:

$(window).trigger('resize');
— विंसेंट सेल्स
स्रोत
11
संकेत: यह आपकी पूरी विंडो को फिर से तैयार करेगा, जो कि महंगा प्रदर्शन है और शायद ओपी नहीं चाहता है
— hereandnow78
7
खिड़की का आकार बदलना हमेशा एक reflow को ट्रिगर $(window).trigger('resize')करता है लेकिन कोड नहीं करता है, यह केवल 'आकार' घटना को फेंकता है जो संबंधित हैंडलर को ट्रिगर करता है यदि यह असाइन किया गया है।
— ग्वारी जूल
1
तुम मुझे पूरे एक हफ्ते बचाओ! मेरा मुद्दा <बॉडी स्टाइल = "ज़ूम: 67%"> सेट करने के बाद है, पेज मेरे अपेक्षित स्तर पर ज़ूम इन हुआ, लेकिन पेज फ्रीज़ हो गया है और स्क्रॉल नहीं किया जा सकता है!। आपके उत्तर ने इस समस्या को तुरंत हल कर दिया
— user1143669
30

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

.willnotrender { 
   transform: translateZ(0); 
}

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

— morewry
स्रोत
1
यह मेरे लिए तब ठीक काम करता था जब समस्या एक हटाए गए HTML तत्व को कैनवास पर खींची जा रही थी, भले ही कैनवास लगातार एनिमेटेड था।
— कन्निस
यह मेरे साथ होने वाला एक लेआउट मुद्दा था neon-animated-pages।
— साभार
1
यह काम किया। सफ़ारी ऐसे तत्वों को छोड़ रहा था जहाँ एक div सेट में कोई भी प्रदर्शित करने के लिए, दृश्यमान और चयन-सक्षम नहीं था। खिड़की का आकार बदलकर उन्हें गायब कर दिया। इस परिवर्तन को जोड़ने से "कलाकृतियों" के गायब होने की उम्मीद थी।
— जेफ मैट्सन
28

यह समाधान बिना टाइमआउट के! असली ताकत redraw! Android और iOS के लिए।

var forceRedraw = function(element){
  var disp = element.style.display;
  element.style.display = 'none';
  var trick = element.offsetHeight;
  element.style.display = disp;
};
— aviomaksim
स्रोत
1
यह मेरे लिए क्रोम पर काम नहीं करता है और न ही लिनक्स पर एफएफ। हालांकि बस एलिमेंट एक्सेस करना ।offsetHeight (डिस्प्ले प्रॉपर्टी को संशोधित किए बिना) काम करता है । ऐसा तब है जब ब्राउज़र तत्व दिखाई न देने पर ऑफसेटहाइट गणना को छोड़ देगा।
— ग्रोड्रिग्ज
यह समाधान एक बग के चारों ओर काम करने के लिए पूरी तरह से काम करता है जिसका सामना मैंने "ओवरवॉल्फ" में उपयोग किए गए क्रोम-आधारित ब्राउज़र में किया था। मैं यह पता लगाने की कोशिश कर रहा था कि यह कैसे करना है और आपने मुझे प्रयास करने से बचाया।
— nacitar sevaht
13

यह मेरे लिए काम करता है। कुदोस यहां जाते हैं ।

jQuery.fn.redraw = function() {
    return this.hide(0, function() {
        $(this).show();
    });
};

$(el).redraw();
— Župa
स्रोत
1
लेकिन इसने कुछ 'अवशेष' जैसे 'डिस्प्ले: ब्लॉक' आदि को छोड़ दिया जो कभी-कभी पृष्ठ संरचना को नष्ट कर सकते हैं।
— पाई 6k
यह अनिवार्य रूप से समान होना चाहिए$().hide().show(0)
— Mahn
@ क्या आपने इसकी कोशिश की? मेरे अनुमान में .hide () इस प्रकार गैर-अवरोधक है कि यह विधि के पूरे बिंदु ब्राउज़र उर्फ ​​में फिर से रेंडरिंग रन को छोड़ देगा। (और अगर मुझे सही याद है, तो मैंने इसे वापस परीक्षण किया।)
— zupa
2
@zupa यह परीक्षण किया गया है और क्रोम 38 पर काम कर रहा है। चाल उस show()से अलग show(0)है जिसमें बाद में एक अवधि निर्दिष्ट करके, इसे jQuery एनीमेशन विधियों द्वारा टाइमआउट में ट्रिगर किया गया है, बल्कि तुरंत जो उसी तरह से प्रस्तुत करने के लिए समय देता hide(0, function() { $(this).show(); })है ।
— महन
@ मेन ठीक है तो अच्छा कैच। यदि यह क्रॉस प्लेटफ़ॉर्म काम करता है और हाल ही में jQuery सुविधा नहीं है तो मैं निश्चित रूप से आपके समाधान के लिए हूं। जैसा कि मेरे पास इसका परीक्षण करने का समय नहीं है, मैं इसे 'काम' कर सकता हूं। यदि आप उपरोक्त आवेदन को सोचते हैं तो उत्तर को संपादित करने के लिए आपका स्वागत है।
— zupa
9

एक तत्व को छिपाना और फिर 0 के सेटटाइमआउट के भीतर इसे फिर से दिखाना एक redraw को मजबूर करेगा।

$('#page').hide();
setTimeout(function() {
    $('#page').show();
}, 0);
— ब्रैडी एमर्सन
स्रोत
1
यह एक क्रोम बग के लिए काम करता है, जहां एसवीजी फिल्टर कभी-कभी रिपीट नहीं करते हैं, bugs.chromium.org/p/chromium/issues/detail?id=231560 । टाइमआउट महत्वपूर्ण था।
— जेसन डी
यह वह चीज है जिसने मेरे लिए काम किया, जबकि क्रोम को उन मूल्यों के लिए मजबूर करने की कोशिश की myElement.getBoundingClientRect(), जिन्हें कैश किया जा रहा था, अनुकूलन या प्रदर्शन उद्देश्यों के लिए। मैंने फंक्शन के लिए एक शून्य मिलीसेकंड टाइमआउट जोड़ा है जो नए तत्व को DOM में जोड़ता है और पुराने तत्व के साथ नए मूल्यों को प्राप्त करता है जो पिछले (कैश्ड) मान DOM से हटा दिया गया था।
— TheDarkIn1978
6

यह मेरे लिए चाल करने के लिए लगता है। इसके अलावा, यह वास्तव में बिल्कुल नहीं दिखाता है।

$(el).css("opacity", .99);
setTimeout(function(){
   $(el).css("opacity", 1);
},20);
— जेवियर फोलेट
स्रोत
इस बग के बारे में क्रोमियम संस्करण 60.0.3112.113 में मेरे लिए काम किया: अंक 727076 । कुशल और सूक्ष्म; बहुत धन्यवाद।
— लोनी बेस्ट
@ wiktus239 शायद 20 मिली बहुत तेज़ है और ब्राउज़र के पास .99 में बदलने का समय नहीं है, समय से पहले 1.0 में बदलने का समय है? - यह अपारदर्शिता चाल मेरे लिए वैसे भी काम करती है, आईफोन 12 आईओएस में दिखाई देने वाले आईफ्रेम में सामग्री बनाने के लिए, और मैं हर 1 000 मिलिस को टॉगल करता हूं। यह भी लिंक से जुड़े मुद्दे 727076 में ऊपर टिप्पणी (1000 मिलिस) में क्या है।
— काजागमनस
4

कॉल window.getComputedStyle()एक reflow मजबूर करना चाहिए

— qlqllu
स्रोत
2
मेरे लिए काम नहीं किया, लेकिन ऐसा शायद इसलिए है क्योंकि मुझे उस offsetHeightसंपत्ति की ज़रूरत थी जो सीएसएस नहीं है।
— सेबस
3

मैं इस चुनौती में आज क्रोम v51 के साथ OSX El Capitan में भाग गया। सवाल में पेज ने सफारी में काम किया। मैंने इस पृष्ठ पर लगभग हर सुझाव की कोशिश की - कोई भी सही काम नहीं किया - सभी का दुष्प्रभाव था ... मैंने नीचे दिए गए कोड को लागू करना समाप्त कर दिया - सुपर सरल - कोई साइड-इफेक्ट (अभी भी सफारी में पहले की तरह काम नहीं करता है)।

समाधान: आवश्यकतानुसार समस्या वाले वर्ग पर टॉगल करें। प्रत्येक टॉगल एक redraw मजबूर करेगा। (मैंने सुविधा के लिए jQuery का उपयोग किया, लेकिन वेनिला जावास्क्रिप्ट को कोई समस्या नहीं होनी चाहिए ...)

jQuery क्लास टॉगल

$('.slide.force').toggleClass('force-redraw');

CSS क्लास

.force-redraw::before { content: "" }

और बस...

नोट: प्रभाव को देखने के लिए आपको "पूर्ण पृष्ठ" के नीचे स्निपेट चलाना होगा।

$(window).resize(function() {
  $('.slide.force').toggleClass('force-redraw');
});
.force-redraw::before {
  content: "";
}
html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.slide-container {
  width: 100%;
  height: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  padding-left: 10%;
  padding-right: 5%;
}
.slide {
  position: relative;
  display: inline-block;
  height: 30%;
  border: 1px solid green;
}
.slide-sizer {
  height: 160%;
  pointer-events: none;
  //border: 1px solid red;

}
.slide-contents {
  position: absolute;
  top: 10%;
  left: 10%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>
  This sample code is a simple style-based solution to maintain aspect ratio of an element based on a dynamic height.  As you increase and decrease the window height, the elements should follow and the width should follow in turn to maintain the aspect ratio.  You will notice that in Chrome on OSX (at least), the "Not Forced" element does not maintain a proper ratio.
</p>
<div class="slide-container">
  <div class="slide">
    <img class="slide-sizer" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
    <div class="slide-contents">
      Not Forced
    </div>
  </div>
  <div class="slide force">
    <img class="slide-sizer" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
    <div class="slide-contents">
      Forced
    </div>
  </div>
</div>
स्निपेट का विस्तार करें

— बेन फीली
स्रोत
2 
function resizeWindow(){
    var evt = document.createEvent('UIEvents');
    evt.initUIEvent('resize', true, false,window,0);
    window.dispatchEvent(evt); 
}

500 मिलीसेकंड के बाद इस फ़ंक्शन को कॉल करें।

— शोभित
स्रोत
2

यदि आप अपनी शैलियों में घोषित शैलियों को संरक्षित करना चाहते हैं, तो कुछ का उपयोग करना बेहतर होगा:

jQuery.fn.redraw = function() {
    this.css('display', 'none'); 
    var temp = this[0].offsetHeight;
    this.css('display', '');
    temp = this[0].offsetHeight;
};

$('.layer-to-repaint').redraw();

NB: नवीनतम वेबकिट / ब्लिंक के साथ, का मान संग्रहीत करते हुए offsetHeight अनिवार्य है ताकि पुनरावृत्ति को ट्रिगर किया जा सके, अन्यथा वीएम (अनुकूलन उद्देश्यों के लिए) शायद उस निर्देश को छोड़ देगा।

अद्यतन: दूसरे offsetHeightपढ़ने को जोड़ा , यह आवश्यक है कि displayमूल्य को बहाल करने के साथ एक सीएसएस संपत्ति / वर्ग परिवर्तन के बाद ब्राउज़र को कतारबद्ध / कैशिंग करने से रोका जाए (इस तरह एक सीएसएस संक्रमण का पालन किया जा सकता है)

— guari
स्रोत
1

नमूना एचटीएमएल:

<section id="parent">
  <article class="child"></article>
  <article class="child"></article>
</section>

जे एस:

  jQuery.fn.redraw = function() {
        return this.hide(0,function() {$(this).show(100);});
        // hide immediately and show with 100ms duration

    };

कॉल फ़ंक्शन:

$('article.child').redraw(); // <== बुरा विचार

$('#parent').redraw();
— मेहदी रोस्तमी
स्रोत
मेरे .fadeIn(1)बजाय के साथ भी काम करता .show(300)है - तत्व को चारों ओर नहीं धकेलना। तो मैं लगता है, इसके बारे में ट्रिगर है display:noneऔर वापस करने के लिएblock
— BananaAcid
0

आईई पर मेरे लिए काम करने वाला एक दृष्टिकोण (मैं प्रदर्शन तकनीक का उपयोग नहीं कर सका क्योंकि एक इनपुट था जो ढीले फोकस नहीं होना चाहिए)

यदि आपके पास 0 मार्जिन है (पैडिंग कार्य को भी बदलना)

if(div.style.marginLeft == '0px'){
    div.style.marginLeft = '';
    div.style.marginRight = '0px';
} else {
    div.style.marginLeft = '0px';
    div.style.marginRight = '';
}
— रोगल गार्सिया
स्रोत
0

केवल सीएसएस। यह उन परिस्थितियों के लिए काम करता है जहां एक बाल तत्व को हटा दिया जाता है या जोड़ा जाता है। इन स्थितियों में, सीमाएं और गोल कोने कलाकृतियों को छोड़ सकते हैं।

el:after { content: " "; }
el:before { content: " "; }
— rm.rf.etc
स्रोत
0

IE10 + IE11 के लिए मेरा फिक्स। मूल रूप से क्या होता है कि आप एक रैपिंग-तत्व के भीतर एक डीआईवी जोड़ते हैं जिसे पुनर्गणना करना पड़ता है। फिर बस इसे हटा दें और वॉयला; एक जादू की तरह काम करता है :)

    _initForceBrowserRepaint: function() {
        $('#wrapper').append('<div style="width=100%" id="dummydiv"></div>');
        $('#dummydiv').width(function() { return $(this).width() - 1; }).width(function() { return $(this).width() + 1; });
        $('#dummydiv').remove();
    },
— नारायण
स्रोत
0

अधिकांश उत्तरों में एक एसिंक्रोनस टाइमआउट के उपयोग की आवश्यकता होती है, जो एक कष्टप्रद झपकी का कारण बनता है।

लेकिन मैं इस एक के साथ आया, जो सुचारू रूप से काम करता है क्योंकि यह सिन्क्रोनस है:

var p = el.parentNode,
    s = el.nextSibling;
p.removeChild(el);
p.insertBefore(el, s);
— Oriol
स्रोत
क्या इन तत्वों से जुड़ी कोई घटना अभी भी काम करेगी?
— केरी जॉनसन
0

यह मेरा समाधान है जो सामग्री को गायब करने के लिए काम करता है ...

<script type = 'text/javascript'>
    var trash_div;

    setInterval(function()
    {
        if (document.body)
        {
            if (!trash_div)
                trash_div = document.createElement('div');

            document.body.appendChild(trash_div);
            document.body.removeChild(trash_div);
        }
    }, 1000 / 25); //25 fps...
</script>
— कॉसमॉस
स्रोत
0

मैं एक समान मुद्दे में भाग गया और JS की इस सरल रेखा ने इसे ठीक करने में मदद की:

document.getElementsByTagName('body')[0].focus();

मेरे मामले में यह एक क्रोम एक्सटेंशन के साथ बग था जो एक्सटेंशन के भीतर से अपने सीएसएस को बदलने के बाद पृष्ठ को फिर से नहीं खोल रहा है।

— Rotareti
स्रोत
4
यह कीबोर्ड एक्सेसिबिलिटी को तोड़ता है।
— पंगम्मा
0

मैं सभी राज्यों को पिछले राज्य (पुनः लोड किए बिना) को वापस करना चाहता था जिसमें jquery द्वारा जोड़े गए तत्व भी शामिल थे। उपरोक्त कार्यान्वयन काम नहीं करने वाला है। और मैंने निम्नानुसार किया।

// Set initial HTML description
var defaultHTML;
function DefaultSave() {
  defaultHTML = document.body.innerHTML;
}
// Restore HTML description to initial state
function HTMLRestore() {
  document.body.innerHTML = defaultHTML;
}



DefaultSave()
<input type="button" value="Restore" onclick="HTMLRestore()">
— रयोसुके हुजीसावा
स्रोत
0

मेरे पास एक प्रतिक्रिया घटक सूची थी जिसे जब स्क्रॉल किया गया था, तब एक और पृष्ठ खोला गया था, तब वापस लौटने पर सूची को सफारी आईओएस पर तब तक प्रस्तुत नहीं किया गया था जब तक कि पेज को स्क्रॉल नहीं किया गया था। तो यह तय है।

    componentDidMount() {
        setTimeout(() => {
            window.scrollBy(0, 0);
        }, 300);
    }
— luky
स्रोत
0

नीचे IE 11 और एज पर मेरे लिए css काम करता है, कोई JS की जरूरत नहीं है। scaleY(1)यहाँ चाल है। सबसे सरल उपाय लगता है।

.box {
    max-height: 360px;
    transition: all 0.3s ease-out;
    transform: scaleY(1);
}
.box.collapse {
    max-height: 0;
}
— एडमंड वांग
स्रोत
0

2020: हल्का और मजबूत

पिछले समाधान अब मेरे लिए काम नहीं करते हैं।

मुझे लगता है कि ब्राउज़र अधिक से अधिक "बेकार" परिवर्तनों का पता लगाकर ड्राइंग प्रक्रिया का अनुकूलन करते हैं।

यह समाधान ब्राउज़र को मूल तत्व को बदलने के लिए एक क्लोन तैयार करता है। यह काम करता है और शायद अधिक टिकाऊ है:

const element = document.querySelector('selector');
if (element ) {
  const clone = element.cloneNode(true);
  element.replaceWith(clone);
}

Chrome 80 / एज 80 / फ़ायरफ़ॉक्स 75 पर परीक्षण किया गया

— जेपी डुवेट
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.