Paksa DOM menggambar ulang / menyegarkan di Chrome / Mac

Sekali-sekali, Chrome akan membuat HTML / CSS yang valid dengan benar salah atau tidak sama sekali. Menggali melalui inspektur DOM sering cukup untuk membuatnya menyadari kesalahan cara dan menggambar ulang dengan benar, sehingga terbukti bahwa markupnya baik. Ini sering terjadi (dan dapat diprediksi) cukup dalam proyek yang sedang saya kerjakan sehingga saya telah menempatkan kode untuk memaksa redraw dalam keadaan tertentu.

Ini berfungsi di sebagian besar kombinasi browser / os:

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

Seperti pada, atur beberapa properti CSS yang tidak digunakan, lalu minta beberapa informasi yang memaksa redraw, lalu unduh properti tersebut. Sayangnya, tim yang cemerlang di belakang Chrome untuk Mac tampaknya telah menemukan cara untuk mendapatkan offsetHeight itu tanpa menggambar ulang. Dengan demikian membunuh hack yang bermanfaat.

Sejauh ini, yang terbaik yang saya hasilkan untuk mendapatkan efek yang sama pada Chrome / Mac adalah keburukan ini:

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

Seperti dalam, sebenarnya memaksa elemen untuk melompat sedikit, lalu dinginkan sebentar dan melompat kembali. Yang lebih parah, jika Anda menjatuhkan batas waktu di bawah 500 ms (ke tempat yang kurang terlihat), sering kali tidak akan memiliki efek yang diinginkan, karena browser tidak akan berkeliling untuk menggambar ulang sebelum kembali ke keadaan semula.

Adakah yang mau menawarkan versi yang lebih baik dari hack redraw / refresh ini (lebih disukai berdasarkan contoh pertama di atas) yang bekerja di Chrome / Mac?

Tidak yakin persis apa yang ingin Anda capai tetapi ini adalah metode yang saya gunakan di masa lalu dengan keberhasilan memaksa browser untuk menggambar ulang, mungkin itu akan berhasil untuk Anda.

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

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

Jika gambar sederhana ini tidak berfungsi, Anda dapat mencoba yang ini. Ini menyisipkan simpul teks kosong ke dalam elemen yang menjamin redraw.

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: Menanggapi Šime Vidas apa yang kami capai di sini akan menjadi reflow paksa. Anda dapat mengetahui lebih lanjut dari master sendiri http://paulirish.com/2011/dom-html5-css3-performance/

Tidak ada jawaban di atas yang berfungsi untuk saya. Saya memang memperhatikan bahwa mengubah ukuran jendela saya memang menyebabkan redraw. Jadi ini berhasil untuk saya:

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

Kami baru-baru ini menemukan ini dan menemukan bahwa mempromosikan elemen yang terpengaruh ke lapisan komposit dengan translateZ memperbaiki masalah tanpa memerlukan javascript tambahan.

.willnotrender { 
   transform: translateZ(0); 
}

Karena masalah melukis ini sebagian besar muncul di Webkit / Blink, dan perbaikan ini sebagian besar menargetkan Webkit / Blink, dalam beberapa kasus lebih baik. Terutama karena banyak solusi JavaScript menyebabkan reflow dan pengecatan ulang , bukan hanya pengecatan ulang.

Solusi ini tanpa batas waktu! Redraw kekuatan nyata ! Untuk Android dan iOS.

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

Ini bekerja untuk saya. Kudos pergi ke sini .

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

$(el).redraw();

Menyembunyikan elemen dan kemudian menampilkannya lagi dalam setTimeout 0 akan memaksa redraw.

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

Ini sepertinya melakukan trik untuk saya. Plus, itu benar-benar tidak terlihat sama sekali.

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

panggilan window.getComputedStyle()harus memaksa reflow

Saya mengalami tantangan ini hari ini di OSX El Capitan dengan Chrome v51. Halaman yang dipermasalahkan bekerja dengan baik di Safari. Saya mencoba hampir setiap saran pada halaman ini - tidak ada yang berhasil - semua memiliki efek samping ... Saya akhirnya menerapkan kode di bawah ini - super sederhana - tidak ada efek samping (masih berfungsi seperti sebelumnya di Safari).

Solusi: Beralih kelas pada elemen yang bermasalah sesuai kebutuhan. Setiap toggle akan memaksa redraw. (Saya menggunakan jQuery untuk kenyamanan, tetapi JavaScript vanilla seharusnya tidak menjadi masalah ...)

jQuery Class Toggle

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

Kelas CSS

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

Dan itu saja ...

CATATAN: Anda harus menjalankan cuplikan di bawah "Halaman Penuh" untuk melihat efeknya.

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

panggil fungsi ini setelah 500 milidetik.

Jika Anda ingin mempertahankan gaya yang dinyatakan dalam lembar gaya Anda, lebih baik menggunakan sesuatu seperti:

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: dengan webkit / blink terbaru, menyimpan nilai offsetHeightwajib untuk memicu pengecatan ulang, jika tidak VM (untuk keperluan optimasi) mungkin akan melewati instruksi itu.

Pembaruan: menambahkan offsetHeightpembacaan kedua , perlu untuk mencegah browser dari antrian / caching perubahan properti / kelas CSS berikut dengan mengembalikan displaynilai (dengan cara ini transisi CSS yang dapat mengikuti harus dirender)

Contoh 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

    };

fungsi panggilan:

$('article.child').redraw(); // <== ide buruk

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

Suatu pendekatan yang bekerja untuk saya di IE (saya tidak bisa menggunakan teknik tampilan karena ada input yang tidak boleh kehilangan fokus)

Ini berfungsi jika Anda memiliki 0 margin (mengubah padding juga berfungsi)

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

Hanya CSS. Ini berfungsi untuk situasi di mana elemen anak dihapus atau ditambahkan. Dalam situasi ini, batas dan sudut bundar dapat meninggalkan artefak.

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

Perbaikan saya untuk IE10 + IE11. Pada dasarnya yang terjadi adalah Anda menambahkan DIV di dalam elemen pembungkus yang harus dihitung ulang. Kemudian cukup keluarkan dan voila; bekerja seperti pesona :)

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

Sebagian besar jawaban membutuhkan penggunaan batas waktu asynchroneous, yang menyebabkan kedipan yang mengganggu.

Tapi saya datang dengan yang ini, yang bekerja dengan lancar karena sinkron:

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

Ini solusi saya yang berfungsi untuk menghilangkan konten ...

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

Saya mengalami masalah serupa dan garis JS sederhana ini membantu memperbaikinya:

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

Dalam kasus saya itu adalah bug dengan ekstensi Chrome yang tidak menggambar ulang halaman setelah mengubah CSS-nya dari dalam ekstensi.

Saya ingin mengembalikan semua status ke status sebelumnya (tanpa memuat ulang) termasuk elemen yang ditambahkan oleh jquery. Implementasi di atas tidak akan berhasil. dan saya lakukan sebagai berikut.

// 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()">

Saya memiliki daftar komponen reaksi yang ketika digulir, kemudian membuka halaman lain, kemudian ketika kembali daftar tidak diberikan pada Safari iOS sampai halaman digulir. Jadi ini adalah perbaikannya.

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

Di bawah ini css berfungsi untuk saya di IE 11 dan Edge, tidak perlu JS. scaleY(1)lakukan triknya di sini. Tampaknya solusi paling sederhana.

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

Itu membantu saya

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

2020: Lebih ringan dan lebih kuat

Solusi sebelumnya tidak berfungsi lagi untuk saya.

Saya kira browser mengoptimalkan proses menggambar dengan mendeteksi semakin banyak perubahan "tidak berguna".

Solusi ini membuat browser menggambar klon untuk mengganti elemen asli. Ini bekerja dan mungkin lebih berkelanjutan:

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

diuji pada Chrome 80 / Edge 80 / Firefox 75