Pourquoi WebKit ne met-il pas à jour les styles automatiquement et comment puis-je forcer une repeinture ?

Forcer WebKit à mettre à jour les styles

Vous êtes confronté à un problème où un changement de style appliqué via JavaScript ne se propage pas à tous les éléments concernés dans Navigateurs basés sur WebKit comme Chrome et Safari. Cela peut parfois être constaté lorsque plusieurs éléments héritent des styles d'un ancêtre commun avec des enfants qui ont le focus ou contiennent des éléments interactifs tels que des liens.

Le manque de réponse de WebKit

WebKit ne repeindre automatiquement lorsqu'il reçoit des mises à jour des styles hérités. Cela contraste avec d'autres navigateurs comme Firefox, Opera et IE, qui gèrent ces modifications de manière plus transparente.

Forcer une repeinture via Nudging

Étant donné que WebKit ne se met pas à jour styles automatiquement, vous pouvez forcer une repeinture en apportant une modification mineure à n’importe quel élément de la page. Dans les outils de développement Chrome, vous avez observé que même le fait de décocher et de revérifier un attribut d'un élément arbitraire déclenchait la mise à jour de style correcte.

Solution proposée

Pour forcer une repeinture par programme , vous pouvez utiliser la technique suivante :

sel.style.display = 'none';
sel.offsetHeight; // no need to store this anywhere, just referencing it is sufficient
sel.style.display = '';

Cette approche consiste à masquer temporairement puis à afficher l'élément. La ligne offsetHeight garantit que le navigateur applique réellement les modifications. Vous n'avez pas besoin de stocker la hauteur qu'il renvoie.

Limitation potentielle

Il est confirmé que la solution fournie fonctionne pour les éléments avec affichage "bloc". Il est possible qu'il présente un comportement différent pour les éléments avec d'autres modes d'affichage, mais cela nécessite une enquête plus approfondie.

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!