Wie erzwinge ich eine DOM-Aktualisierung in Chrome auf dem Mac?

DOM-Aktualisierung auf Chrome für Mac erzwingen

Obwohl gültiges HTML und CSS vorhanden sind, rendert Chrome auf dem Mac gelegentlich Elemente nicht richtig oder vernachlässigt das Rendern sie ganz. Während die Überprüfung des DOM durch den Inspektor das Problem häufig löst, gibt es Fälle, in denen Chrome absichtlich auf ein Neuzeichnen verzichtet.

Der übliche Neuzeichnen-/Aktualisierungs-Hack, der für andere Browser-Betriebssystem-Kombinationen funktioniert, besteht darin, eine nicht verwendete CSS-Eigenschaft zu ändern und einige abzurufen Informationen, um ein Neuzeichnen auszulösen und dann die Eigenschaftsänderung rückgängig zu machen.

Diese Methode schlägt jedoch in Chrome für Mac fehl. Es musste eine komplexere Lösung verwendet werden:

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

Diese Methode führt dazu, dass das Element sichtbar springt, was ein Neuzeichnen erzwingt. Eine Reduzierung der Zeitüberschreitung auf unter 500 ms kann jedoch dazu führen, dass der Browser neu zeichnet, bevor das Element in seinen ursprünglichen Zustand zurückkehrt, wodurch der Effekt zunichte gemacht wird.

Alternative Neuzeichnungsmethoden

Eine weitere einfache Aktualisierung Eine Methode, die möglicherweise ausreicht, besteht darin, den übergeordneten Container des benötigten Elements auszublenden und dann sofort anzuzeigen Neuzeichnen.

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

// Plain JavaScript
document.getElementById('parentOfElementToBeRedrawn').style.display = 'none';
document.getElementById('parentOfElementToBeRedrawn').style.display = 'block';

Für eine gründlichere Neuzeichnung kann ein leerer Textknoten in das Element eingefügt und daraus entfernt werden:

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
}

Dies erzwingt einen Neufluss, wie von Paul Irish beschrieben: http://paulirish.com/2011/dom-html5-css3-performance/

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