Comment forcer les redessins du DOM dans Chrome sur macOS ?

Forcer le redessinage du DOM sur Chrome/Mac à l'aide de différentes approches

Dans certains scénarios, Chrome sur Mac peut ne pas réussir à redessiner correctement les éléments HTML/CSS , même lorsque le code est valide. Pour résoudre ce problème, les développeurs ont souvent recours à un redessinage forcé à l'aide de transformations CSS ou de manipulations de bordures.

L'approche standard, utilisant des transformations CSS, consiste à modifier temporairement la propriété '-webkit-transform', en récupérant le offsetHeight pour déclencher un redessin, puis la restauration de la valeur de transformation d'origine. Cependant, cette méthode ne fonctionne pas sur Chrome/Mac.

Pour surmonter cette limitation, une approche alternative consiste à activer/désactiver la propriété border, forçant ainsi l'élément à sauter légèrement, puis à revenir à son état d'origine. Cette approche nécessite un délai d'attente pour garantir suffisamment de temps pour que le redessin se produise.

Une autre méthode, suggérée dans la réponse, consiste à masquer et à afficher l'élément parent de l'élément qui doit être redessiné. Ce simple redessin peut suffire dans la plupart des cas.

Pour les situations plus complexes, la fonction "forceRedraw" insère un nœud de texte vide dans l'élément puis le supprime, garantissant un redessin. Le délai d'attente dans cette fonction contrôle la vitesse du saut visuel.

Comprendre la refusion forcée

Les techniques décrites ici visent à forcer une « refusion », un processus par lequel le navigateur recalcule la mise en page d'un document. En déclenchant une redistribution, ces méthodes garantissent que le navigateur restitue correctement les éléments concernés.

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!