Wie erzwinge ich zuverlässig eine DOM-Neuzeichnung in Chrome unter macOS?

DOM-Neuzeichnung auf Chrome/Mac erzwingen: Eine Lösung für Rendering-Probleme

In bestimmten Situationen kann Chrome auf dem Mac HTML/CSS trotz der Markups nicht korrekt rendern Gültigkeit. Eine gängige Lösung besteht darin, eine CSS-Eigenschaft zu ändern und die offsetHeight abzurufen, um ein Neuzeichnen zu erzwingen. Allerdings funktioniert diese Methode in Chrome/Mac nicht mehr effizient.

Um dieses Problem zu beheben, besteht ein alternativer Ansatz, der auf Chrome/Mac funktioniert, darin, den Rand des problematischen Elements vorübergehend zu ändern:

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

Dadurch wird eine Neupositionierung des Elements erzwungen, wodurch ein Neuzeichnen sichergestellt wird. Ein Nachteil ist jedoch die damit verbundene Verzögerung, die optisch ablenken kann.

Eine noch zuverlässigere Methode 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;
    element.appendChild(n);
    element.style.display = 'none';
    setTimeout(function(){
        element.style.display = disp;
        n.parentNode.removeChild(n);
    },20);
}

Diese Technik garantiert a Neu zeichnen, ohne dass ein visueller Sprung erforderlich ist. Durch Ändern der Anzeigeeigenschaft und Einfügen eines Textknotens wird ein Reflow des DOM ausgelöst und das Element genau angezeigt.

Das obige ist der detaillierte Inhalt vonWie erzwinge ich zuverlässig eine DOM-Neuzeichnung in Chrome unter macOS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!