Comment forcer une actualisation du DOM dans Chrome sur Mac ?

Forcer l'actualisation du DOM sur Chrome pour Mac

Malgré un code HTML et CSS valide, Chrome sur Mac ne parvient parfois pas à restituer correctement les éléments ou néglige le rendu eux entièrement. Bien que l'inspection du DOM via l'inspecteur résolve souvent le problème, il existe des cas où Chrome évite intentionnellement de redessiner.

Le hack de redessin/actualisation courant qui fonctionne pour d'autres combinaisons navigateur-OS implique de modifier une propriété CSS inutilisée, en récupérant certaines informations pour déclencher un redessinage, puis annuler la modification de propriété.

Cependant, cette méthode échoue dans Chrome pour Mac. Une solution plus complexe a dû être employée :

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

Cette méthode fait visiblement sauter l'élément, ce qui force un redessin. Cependant, réduire le délai d'attente en dessous de 500 ms peut entraîner un redessin du navigateur avant que l'élément ne revienne à son état d'origine, annulant ainsi l'effet.

Méthodes de redessinage alternatives

Une autre actualisation simple La méthode qui peut suffire est de masquer puis d'afficher immédiatement le conteneur parent de l'élément qui a besoin redessiner.

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

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

Pour un redessinage plus approfondi, un nœud de texte vide peut être inséré et supprimé de l'élément :

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
}

Cela force une redistribution, comme décrit par Paul Irish : http://paulirish.com/2011/dom-html5-css3-performance/

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!