บังคับให้วาดใหม่ / รีเฟรช DOM บน Chrome / Mac

ในบางครั้ง Chrome จะแสดง HTML / CSS ที่ถูกต้องอย่างสมบูรณ์ไม่ถูกต้องหรือไม่ถูกเลย การขุดผ่านผู้ตรวจสอบ DOM นั้นเพียงพอที่จะทำให้เกิดข้อผิดพลาดในวิธีการและวาดใหม่ได้อย่างถูกต้องดังนั้นจึงเป็นกรณีที่มาร์กอัปเป็นสิ่งที่ดี สิ่งนี้เกิดขึ้นบ่อยครั้ง (และคาดการณ์ได้) เพียงพอในโครงการที่ฉันกำลังทำอยู่ซึ่งฉันได้วางโค้ดไว้เพื่อบังคับให้วาดใหม่ในบางสถานการณ์

ใช้ได้กับเบราว์เซอร์ / ระบบผสมส่วนใหญ่:

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

เช่นเดียวกับปรับแต่งคุณสมบัติ CSS ที่ไม่ได้ใช้แล้วขอข้อมูลบางอย่างที่บังคับให้วาดใหม่จากนั้นคลายคุณสมบัติ น่าเสียดายที่ทีมงานที่อยู่เบื้องหลัง Chrome สำหรับ Mac นั้นดูเหมือนจะพบวิธีที่จะชดเชยความสูงนั้นได้โดยไม่ต้องวาดใหม่ ดังนั้นการฆ่าแฮ็คที่มีประโยชน์อย่างอื่น

จนถึงตอนนี้สิ่งที่ดีที่สุดที่ฉันได้รับเพื่อให้ได้ผลเช่นเดียวกันกับ Chrome / Mac คือความอัปลักษณ์ชิ้นนี้:

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

ในขณะที่จริงบังคับให้องค์ประกอบที่จะกระโดดเล็กน้อยจากนั้นทำใจให้สบายวินาทีและกระโดดกลับ ทำให้แย่ลงหากคุณปล่อยเวลานั้นต่ำกว่า 500ms (ไปยังตำแหน่งที่สังเกตเห็นได้น้อยกว่า) บ่อยครั้งจะไม่มีผลตามที่ต้องการเนื่องจากเบราว์เซอร์จะไม่เข้าสู่การวาดซ้ำก่อนที่จะกลับสู่สถานะเดิม

ทุกคนสนใจที่จะเสนอแฮ็ควาดใหม่ / รีเฟรชรุ่นที่ดีกว่านี้ (ควรพิจารณาจากตัวอย่างแรกด้านบน) ที่ทำงานบน Chrome / Mac

ไม่แน่ใจว่าสิ่งที่คุณกำลังพยายามที่จะบรรลุ แต่นี่เป็นวิธีที่ฉันใช้ในอดีตกับความสำเร็จในการบังคับเบราว์เซอร์ที่จะวาดใหม่บางทีมันอาจจะทำงานให้คุณ

// 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
}

แก้ไข: ในการตอบสนองต่อŠime Vidas สิ่งที่เราบรรลุที่นี่จะเป็นการ reflow บังคับ คุณสามารถหาข้อมูลเพิ่มเติมจากต้นแบบตัวเองhttp://paulirish.com/2011/dom-html5-css3-performance/

คำตอบข้างต้นไม่เหมาะกับฉัน ฉันสังเกตเห็นว่าการปรับขนาดหน้าต่างทำให้เกิดการวาดใหม่ ดังนั้นนี่คือมันสำหรับฉัน:

$(window).trigger('resize');

เราเพิ่งพบสิ่งนี้และค้นพบว่าการส่งเสริมองค์ประกอบที่ได้รับผลกระทบไปยังเลเยอร์คอมโพสิตที่มีtranslateZแก้ไขปัญหาโดยไม่ต้องใช้จาวาสคริปต์เพิ่มเติม

.willnotrender { 
   transform: translateZ(0); 
}

เนื่องจากปัญหาการทาสีเหล่านี้ส่วนใหญ่จะปรากฏใน Webkit / Blink และการแก้ไขนี้ส่วนใหญ่มุ่งไปที่ Webkit / Blink ดังนั้นจึงเป็นที่นิยมในบางกรณี โดยเฉพาะอย่างยิ่งเนื่องจากโซลูชัน JavaScript จำนวนมากทำให้เกิดการreflowและทาสีใหม่ไม่ใช่แค่ทาสีใหม่

วิธีการแก้ปัญหานี้โดยไม่ต้องหมดเวลา! วาดแรงจริง! สำหรับ Android และ iOS

var forceRedraw = function(element){
  var disp = element.style.display;
  element.style.display = 'none';
  var trick = element.offsetHeight;
  element.style.display = disp;
};

มันใช้งานได้สำหรับฉัน รุ่งโรจน์ไปที่นี่

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

$(el).redraw();

การซ่อนองค์ประกอบแล้วแสดงอีกครั้งภายใน setTimeout 0 จะบังคับให้วาดใหม่

$('#page').hide();
setTimeout(function() {
    $('#page').show();
}, 0);

ดูเหมือนว่าจะทำเคล็ดลับสำหรับฉัน นอกจากนี้มันไม่แสดงเลย

$(el).css("opacity", .99);
setTimeout(function(){
   $(el).css("opacity", 1);
},20);

โทรwindow.getComputedStyle()ควรบังคับ reflow

ฉันพบกับความท้าทายนี้ใน OSX El Capitan ด้วย Chrome v51 หน้าเว็บดังกล่าวทำงานได้ดีใน Safari ฉันลองเกือบทุกข้อเสนอแนะในหน้านี้ - ไม่มีใครทำงานถูกต้อง - ทั้งหมดมีผลข้างเคียง ... ฉันลงเอยด้วยการใช้รหัสด้านล่าง - ง่ายมาก - ไม่มีผลข้างเคียง (ยังคงทำงานเหมือนเดิมใน Safari)

การแก้ไข: สลับคลาสกับองค์ประกอบที่มีปัญหาตามต้องการ สลับแต่ละครั้งจะบังคับให้วาดใหม่ (ฉันใช้ jQuery เพื่อความสะดวก แต่ JavaScript วานิลลาไม่น่าจะมีปัญหา ... )

jQuery Class Toggle

$('.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>

function resizeWindow(){
    var evt = document.createEvent('UIEvents');
    evt.initUIEvent('resize', true, false,window,0);
    window.dispatchEvent(evt); 
}

เรียกใช้ฟังก์ชันนี้หลังจาก 500 มิลลิวินาที

หากคุณต้องการรักษาสไตล์ที่ประกาศไว้ในสไตล์ชีตของคุณควรใช้สิ่งต่อไปนี้:

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

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

หมายเหตุ: ด้วย webkit / กะพริบล่าสุดการจัดเก็บค่าของ offsetHeightเป็นสิ่งจำเป็นเพื่อกระตุ้นการทาสีมิฉะนั้น VM (สำหรับวัตถุประสงค์ในการปรับให้เหมาะสม) อาจข้ามคำสั่งนั้น

อัปเดต: เพิ่มการoffsetHeightอ่านครั้งที่สองเป็นสิ่งจำเป็นเพื่อป้องกันไม่ให้เบราว์เซอร์เข้าคิว / แคชการเปลี่ยนแปลงคุณสมบัติ / คลาส CSS ต่อไปนี้ด้วยการคืนdisplayค่า (วิธีนี้ควรเปลี่ยนการเปลี่ยน CSS ที่สามารถติดตามได้)

ตัวอย่าง Html:

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

js:

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

    };

ฟังก์ชั่นการโทร:

$('article.child').redraw(); // <== ความคิดที่ไม่ดี

$('#parent').redraw();

วิธีการที่เหมาะกับฉันบน IE (ฉันไม่สามารถใช้เทคนิคการแสดงผลได้เพราะมีอินพุตที่ต้องไม่โฟกัสหลวม)

มันทำงานได้ถ้าคุณมีระยะขอบ 0 (การเปลี่ยนการแพ็ดดิ้งก็ใช้ได้เช่นกัน)

if(div.style.marginLeft == '0px'){
    div.style.marginLeft = '';
    div.style.marginRight = '0px';
} else {
    div.style.marginLeft = '0px';
    div.style.marginRight = '';
}

CSS เท่านั้น สิ่งนี้ใช้ได้กับสถานการณ์ที่องค์ประกอบลูกถูกลบหรือเพิ่ม ในสถานการณ์เหล่านี้เส้นขอบและมุมโค้งมนสามารถทิ้งสิ่งประดิษฐ์ไว้ได้

el:after { content: " "; }
el:before { content: " "; }

การแก้ไขของฉันสำหรับ IE10 + IE11 โดยทั่วไปสิ่งที่เกิดขึ้นคือคุณเพิ่ม DIV ภายในองค์ประกอบการห่อที่ต้องคำนวณใหม่ จากนั้นเพียงลบและ voila; ทำงานเหมือนมีเสน่ห์ :)

    _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();
    },

คำตอบส่วนใหญ่จำเป็นต้องใช้การหมดเวลาแบบอะซิงโครนัสซึ่งทำให้เกิดการกะพริบที่น่ารำคาญ

แต่ฉันมากับอันนี้ซึ่งทำงานได้อย่างราบรื่นเพราะมันเป็นซิงโครนัส:

var p = el.parentNode,
    s = el.nextSibling;
p.removeChild(el);
p.insertBefore(el, s);

นี่คือโซลูชันของฉันที่ใช้ในการหายไปของเนื้อหา ...

<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>

ฉันพบปัญหาที่คล้ายกันและบรรทัดง่ายๆของ JS นี้ช่วยแก้ไข:

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

ในกรณีของฉันมันเป็นข้อผิดพลาดที่มีนามสกุล Chrome ไม่ได้วาดหน้าใหม่หลังจากเปลี่ยน CSS จากภายในส่วนขยาย

ฉันต้องการคืนสถานะทั้งหมดกลับสู่สถานะก่อนหน้า (โดยไม่ต้องโหลดซ้ำ) รวมถึงองค์ประกอบที่เพิ่มโดย 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()">

ฉันมีรายการส่วนประกอบการตอบสนองซึ่งเมื่อเลื่อนแล้วเปิดอีกหน้าจากนั้นเมื่อย้อนกลับรายการจะไม่แสดงผลบน Safari iOS จนกว่าหน้าจะถูกเลื่อน นี่คือการแก้ไข

    componentDidMount() {
        setTimeout(() => {
            window.scrollBy(0, 0);
        }, 300);
    }

css ด้านล่างใช้ได้กับฉันบน IE 11 และ Edge ไม่จำเป็นต้องใช้ JS scaleY(1)ไม่หลอกลวงที่นี่ ดูเหมือนทางออกที่ง่ายที่สุด

.box {
    max-height: 360px;
    transition: all 0.3s ease-out;
    transform: scaleY(1);
}
.box.collapse {
    max-height: 0;
}

มันช่วยฉัน

domNodeToRerender.style.opacity = 0.99;
setTimeout(() => { domNodeToRerender.style.opacity = '' }, 0);

2020: เบาและแข็งแรง

โซลูชันก่อนหน้านี้ไม่ทำงานอีกต่อไปสำหรับฉัน

ฉันเดาว่าเบราว์เซอร์จะปรับกระบวนการวาดภาพให้เหมาะสมที่สุดโดยตรวจพบการเปลี่ยนแปลงที่ "ไร้ประโยชน์" มากขึ้นเรื่อย ๆ

วิธีนี้ทำให้เบราว์เซอร์วาดโคลนเพื่อแทนที่องค์ประกอบเดิม มันใช้งานได้และอาจยั่งยืนกว่า:

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

ทดสอบบน Chrome 80 / Edge 80 / Firefox 75