Comment forcer un redessinage du DOM sur Chrome/Mac ?

Redessin forcé du DOM sur Chrome/Mac

Lorsque vous rencontrez des problèmes de rendu avec Chrome sur Mac, les méthodes traditionnelles de déclenchement d'un redessin échouent en raison d'optimisations implémenté dans le navigateur. Cet article explore une approche alternative qui exploite la manipulation de la visibilité de l'élément parent pour forcer un redessin sans s'appuyer sur la propriété offsetHeight.

Hack commun pour le redessin

Dans d'autres combinaisons de navigateurs , le hack suivant déclenche effectivement un redessin :

el.style.cssText += ';-webkit-transform:rotateZ(0deg)'
el.offsetHeight
el.style.cssText += ';-webkit-transform:none'

En modifiant une propriété CSS inutilisée, puis en demandant des informations qui force un recalcul (comme la hauteur de l'élément), et finalement en restaurant la propriété d'origine, un redessin est obtenu.

Optimisation Chrome/Mac

Malheureusement, Chrome sur Mac contourne ce hack en récupérant le offsetHeight sans déclencher de redessin.

Redessin alternatif Hack

Pour forcer un redessin sur Chrome/Mac, la solution suivante est proposée :

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

Cette méthode introduit un changement visible dans la bordure de l'élément, ce qui oblige le navigateur à redessiner. Un délai d'attente est nécessaire pour garantir que le redessinage se produit avant que la bordure ne revienne à son état d'origine.

Options supplémentaires

D'autres méthodes pour forcer un redessinage incluent :

• Masquer puis afficher l'élément parent en utilisant jQuery :

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

• Insertion d'un nœud de texte vide dans l'élément :

var forceRedraw = function(element) {
    ...
}

Ces méthodes garantissent un redessinage plus direct sans impliquer de manipulation CSS.

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!