WebKit Adjacent/General Sibling & Pseudo Class Bug
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:
body { -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }
WebKit-only fix to a WebKit-only problem.
Well Documented
This is certainly not the first report of this. Here are some bug reports:
WebKit Adjacent/General Sibling & Pseudo Class Bug
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:
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:
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:WebKit-only fix to a WebKit-only problem.
Well Documented
This is certainly not the first report of this. Here are some bug reports:
And other publications which mention the issue: