Comment résoudre le bug de Webkit avec :hover et plusieurs sélecteurs de frères et sœurs adjacents ?

Bogue du Webkit avec :hover et plusieurs sélecteurs de frères et sœurs adjacents

Dans les navigateurs tels que Safari et Chrome, la pseudo-classe :hover fonctionne correctement avec les sélecteurs de frères et sœurs adjacents, tels que a:hover div. Cependant, un bug survient lorsque plusieurs sélecteurs de frères et sœurs adjacents sont utilisés, comme dans div:hover a div.

Le problème

Dans les navigateurs Webkit, le div:hover a div selector a mal fonctionné, échouant pour appliquer un style au

élément comme prévu. Paradoxalement, l'ajout d'un combinateur frère, tel que div:hover ~ div, avec ou sans style, a inexplicablement résolu le problème.

Solution

Pour contourner ce bug du Webkit, vous pouvez utiliser une technique impliquant animation sur l'élément corps. En attachant une classe CSS animée à l'élément body avec une animation vide, vous pouvez efficacement inciter le navigateur à résoudre le bug :

<code class="css">body {
  -webkit-animation: bugfix infinite 1s;
}

@-webkit-keyframes bugfix {
  from {
    padding: 0;
  }
  to {
    padding: 0;
  }
}</code>

Cette solution fonctionne en déclenchant un nouveau rendu de la page, ce qui force Webkit pour résoudre correctement les sélecteurs frères et sœurs. Vous pouvez voir un exemple de cette solution de contournement en action sur JS Fiddle : http://jsfiddle.net/jalbertbowdenii/ds2yY/1/.

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!

css chrome safari webkit class JS this animation http bug issue

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn