Wie erzwinge ich eine Neuzeichnung/Aktualisierung des DOM in Chrome für Mac?

DOM-Neuzeichnen/-Aktualisierung in Chrome für Mac erzwingen

Wenn Chrome für Mac auf gültiges HTML/CSS stößt, werden die Elemente manchmal falsch gerendert oder gar nicht. Während die Überprüfung des DOM in der Browserkonsole normalerweise ein Neuzeichnen auslöst, ist eine automatisiertere Lösung wünschenswert.

Das folgende JS-Snippet funktioniert effektiv in den meisten Browsern und Betriebssystemen:

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

Allerdings Chrome für Mac umgeht die durch offsetHeight ausgelöste Neuzeichnung. Eine Problemumgehung besteht darin, setTimeout zu verwenden, um den Rand des Elements vorübergehend zu ändern und so ein Neuzeichnen zu erzwingen:

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

Dieser Ansatz ist umständlich und auffällig. Eine effizientere Methode zum Erzwingen eines Neuzeichnens in Chrome für Mac besteht darin, einen leeren Textknoten in das Element einzufügen:

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
}

Dieser Ansatz garantiert ein Neuzeichnen und ist effizienter als die Rahmenmethode.

Das obige ist der detaillierte Inhalt vonWie erzwinge ich eine Neuzeichnung/Aktualisierung des DOM in Chrome für Mac?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!