Comment forcer un redessinage du DOM dans Chrome sur Mac ?

Forcer le redessinage du DOM sur Chrome/Mac

Problème :
Dans Chrome pour Mac, forcer un redessinage l'utilisation de l'astuce commune offsetHeight ne fonctionne pas.

Actuel Hack :
Une solution de contournement consiste à ajouter et à supprimer une bordure pour forcer l'élément à sauter visuellement. Cependant, cela introduit un retard notable et peut ne pas être efficace avec des délais d'attente inférieurs.

Solution proposée :
Une approche alternative qui s'est avérée efficace est :

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

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

Solution améliorée :
Pour un redessinage plus garanti, la méthode suivante insère un nœud de texte vide dans le element :

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); // Adjust timeout as needed
};

Cette approche garantit une refonte complète du DOM, résolvant potentiellement le problème du rendu incorrect dans Chrome pour Mac.

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!