Comment forcer un redessinage du DOM dans Chrome sur macOS ?

Forcer le redessinage du DOM sur Chrome/Mac

Ce problème survient lorsque Chrome sur les appareils Mac n'affiche pas correctement les éléments HTML/CSS valides. Bien que l'inspection du DOM déclenche souvent un redessinage correct, ce hack échoue sur Chrome/Mac en raison d'optimisations qui empêchent offsetHeight de déclencher un redessinage.

Le hack suivant est une solution de contournement :

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

Cela force l'élément à sauter légèrement, ce qui déclenche un redessin. Cependant, le retard est perceptible.

Une alternative consiste à utiliser cette méthode à la place :

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

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

Cela masque puis affiche l'élément parent, forçant un redessin.

Si cette méthode échoue, la fonction suivante garantit un redessin en insérant un nœud de texte vide dans 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
}

Cette technique force essentiellement un redistribution, mise à jour de la mise en page et déclenchement d'un redessin.

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!