Bug 45168 - CSS multiple adjacent sibling selector sequence is ignored if prefixed with a pseudo-class selector
: CSS multiple adjacent sibling selector sequence is ignored if prefixed with a...
Status: UNCONFIRMED
: WebKit
CSS
: 528+ (Nightly build)
: PC Linux
: P2 Normal
Assigned To:
:
:
:
:
  Show dependency treegraph
 
Reported: 2010-09-03 02:49 PST by
Modified: 2013-07-11 04:39 PST (History)


Attachments
Test case (1.42 KB, text/html)
2010-09-03 02:49 PST, Pierre Mazière
no flags Details


Note

You need to log in before you can comment on or make changes to this bug.


Description From 2010-09-03 02:49:18 PST
Created an attachment (id=66479) [details]
Test case

The following selector is not matched as it should:
 div.a:hover + div.b + div.c {background-color: yellow;}
EXPECTED: when the mouse is dragged over the div.a element, div.c background should change from white to yellow
OBSERVED: when the mouse is dragged over the div.a element, nothing happens

if the :hover pseudo-class, the selector is now:
 div.a + div.b + div.c {background-color: yellow;}
EXPECTED: div.c background is yellow
OBSERVED: div.c background is yellow

I have tested this whith several pseudo-classes: 
 :hover with DIV and A 
 :active and :focus with A
 :checked with input[type=radio]

WebKit nightly build (2010/09/01) always shows the wrong behaviour, ignoring the adjacent sibling selector sequence
Firefox 3.6.8 and Chromium 5 display the XHTML/CSS as expected by the W3C CSS specs
------- Comment #1 From 2012-03-26 05:00:49 PST -------
Bump.

I've tried[1] with 17.0.963.83 m and 19.0.1080.0 canary.

The animation hack[2] works, but it make screen blink in some cases.

[1] http://jsfiddle.net/W7L7M/1/
[2] http://css-tricks.com/webkit-sibling-bug
------- Comment #2 From 2012-04-21 23:20:46 PST -------
The CSS hack 

     body { -webkit-animation: bugfix infinite 1s; }
     @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }

applies like an issue on Chrome 18.0.1025.162 m, but doe not work on Chrome 20.0.1112.0 canary.

Demo http://jsfiddle.net/W7L7M/3/
------- Comment #3 From 2012-05-17 13:00:44 PST -------
It is still not fixed on Chrome 21.0.1139.2 canary and works fine on Firefox 12.0
------- Comment #4 From 2013-05-05 11:03:14 PST -------
still not fixed in Version 26.0.1410.63

here's some minimal code to try:

<style>.a:checked + .b{background:yellow;}</style>
<input type="checkbox" class="a"><span class="b">b</span>
------- Comment #5 From 2013-05-08 22:14:30 PST -------
The CSS hack

    html {
        -webkit-animation: issueSelector infinite 1s;
    }
    @-webkit-keyframes issueSelector {
        0% {
            display: block;
        }
        100% {
            display: block;
        }
    }

cases Android filckers, since it enables GPU acceleration by repainting html.