WebKit Adjacent/General Sibling & Pseudo Class Bug

Es ist nicht alltäglich, auf einen soliden Bug in WebKit zu stoßen, der meiner Meinung nach in der CSS-Unterstützung führend ist. Alexander Futekov hat mir per E-Mail davon berichtet, und ich bin persönlich nie auf diesen Bug gestoßen.

Das Problem besteht darin, dass die Selektoren für benachbarte (+) oder allgemeine (~) Geschwisterelemente mit Pseudoklassen kombiniert werden. So:

h1 ~ p { color: black; }
h1:hover ~ p { color: red; }

Daran ist nichts falsch, oder? Das erscheint ziemlich einfach. Aber das funktioniert in WebKit nicht, es passiert nichts. Es gibt viele seltsame Eigenheiten, die es beeinflussen und scheinbar Teile davon beheben können. Wie diese:

/* This affects both paragraphs */
h1 ~ p { font: 18px Helvetica, Arial, Sans-Serif; }

/* This works */
h1:hover + p { color: red; }

/* This only affects first
... and does nothing without previous rule */
h1:hover ~ p { color: blue; }

Ich habe nicht jeden einzelnen getestet, aber es gibt anscheinend Probleme mit allen Pseudoklassen-Selektoren (:focus, :hover, :checked, :enabled, etc.).

Eine reine CSS-Lösung!

Alexander schickte auch eine clevere reine CSS-Lösung für das Problem. Verwenden Sie eine "do-nothing"-Animation für das `body`-Element.

/* Warning: while this works, it may cause high CPU load */
<code class="lang-css prettyprint">body { -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }

Eine reine WebKit-Lösung für ein reines WebKit-Problem. WARNHINWEIS: Die Leser Adam Ferguson und Simon Goellner haben beide geschrieben, um mir mitzuteilen, dass diese Lösung die direkte Ursache für einen hohen CPU-Verbrauch auf von ihnen bearbeiteten Websites war.

François Germain hat auch eine Testseite mit einem vorgeschlagenen Fix darauf.

Gut dokumentiert

Dies ist sicherlich nicht der erste Bericht darüber. Hier sind einige Fehlerberichte:

• bugs.webkit.org/show_bug.cgi?id=12520
• bugs.webkit.org/show_bug.cgi?id=17680
• bugs.webkit.org/show_bug.cgi?id=18026
• bugs.webkit.org/show_bug.cgi?id=18027
• bugs.webkit.org/show_bug.cgi?id=26539
• bugs.webkit.org/show_bug.cgi?id=29029
• bugs.webkit.org/show_bug.cgi?id=32695
• bugs.webkit.org/show_bug.cgi?id=45168

Und andere Publikationen, die das Problem erwähnen:

• Inhalte mit reinem CSS3 anzeigen und ausblenden, im Abschnitt Die ältere Generation pflegen.
• CSS3 :target-basierte Schnittstellen im Abschnitt Probleme mit Spinnen und Reptilien.
• dev.opera.com/forums/topic/600712 – eine kurze Diskussion des Fehlers.
• Reine CSS-klappbare Baumstruktur im Abschnitt „Another demo, another bug“.
• Breadcrumbs (& CSS3 general sibling selector) im Abschnitt „Caveats“.
• CSS3 – Fast eine gute Idee, aber für Safari und Chrome von allen Browsern, wo die Webkit-Browser für den Bug stark kritisiert werden.
• Webkit Bug: Hover und Sibling Selector, ein Artikel über den Bug mit einigen möglichen Lösungen.
• Safari CSS :hover und Adjacent Sibling Selector Bug – noch ein Blogbeitrag zu dem Thema.
• Safari Bug-Bericht: Hover mit Adjacent Selector funktioniert nicht, die Sichtweise von Quirksmode auf das Problem.