Pourquoi les navigateurs WebKit ont-ils besoin d'un « coup de pouce » pour propager les modifications de style apportées via JavaScript ?

WebKit Redraw Enigmatic Behavior : résolution des changements de style

Dans le domaine du développement Web, garantir une apparence cohérente dans tous les navigateurs peut poser des défis. L'un de ces problèmes survient lorsque vous tentez d'appliquer des modifications de style à l'aide de JavaScript dans des navigateurs basés sur WebKit (par exemple, Chrome, Safari).

Considérez le code JavaScript suivant :

sel = document.getElementById('my_id');
sel.className = sel.className.replace(/item-[1-9]-selected/,'item-1-selected');
return false;

Ce code vise à modifier l'attribut de classe d'un élément avec l'ID "my_id". Cependant, dans les navigateurs WebKit, seul le premier élément frère descendant affecté est mis à jour, tandis que le second reste inchangé, même s'il s'agit de frères et sœurs immédiats de l'élément modifié.

Curieusement, dans les « Outils de développement » de Chrome, il suffit de basculer n'importe quel élément frère ou sœur. L'attribut de n'importe quel élément déclenche le rendu correct du deuxième frère. Cela suggère que WebKit nécessite un « coup de pouce » pour propager les changements de style.

Solution triviale mais efficace

Après avoir exploré diverses recommandations inefficaces, une solution simple et élégante a émergé dans un commentaire de Vasil Dinkov. Pour forcer une repeinture dans WebKit, exécutez ce qui suit :

sel.style.display='none';
sel.offsetHeight; // Reference is sufficient, no need to store the value
sel.style.display='';

Cette technique masque l'élément ("sel"), lit son offsetHeight (une propriété non nulle pour les éléments non masqués), puis affiche l'élément. Cette manipulation subtile déclenche un redessin, propageant les changements de style prévus.

Considérations supplémentaires

Il reste à tester si cette solution s'applique aux changements de style au-delà du "bloc" propriété. Cependant, dans le cas de l'auteur, cela constitue une solution simple et efficace. En éliminant l'incohérence dans la propagation du style, il garantit une page Web visuellement cohérente sur les navigateurs basés sur WebKit.

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!