WebKit Adjacent/General Sibling & Pseudo Class Bug

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Good news everyone! This is fixed in both stable releases of the WebKit browser Safari (5.1) and Chrome (13)

It’s not every day you come across a solid bug in WebKit, which it seems to me leads the pack in quality support of CSS. Alexander Futekov emailed to let me know about this one, which somehow I have never personally come across.

The problem is using adjacent (+) or general (~) sibling selectors combined with pseudo classes. Like this:

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

Nothing wrong with that, right? Seems pretty straightforward. That just doesn’t work in WebKit, nothing happens. There are lots of weird quirks that can affect it and seemingly fix parts of it. Like this:

/* 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; }

I didn’t test every single one, but there are apparently issues with all the pseudo selectors (:focus, :hover, :checked, :enabled, etc)

A CSS Only Fix!

Alexander also sent a clever CSS only fix to the issue. Use a do-nothing animation on the body:

/* 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; } }

WebKit-only fix to a WebKit-only problem. FAIR WARNING: Readers Adam Ferguson and Simon Goellner both wrote in to tell me this fix was the direct cause of some heavy CPU consumption on sites they were working on.

Fran├žois Germain also has a test page with a proposed fix on it.

Well Documented

This is certainly not the first report of this. Here are some bug reports:

And other publications which mention the issue: