Summary: | CSS multiple adjacent sibling selector sequence is ignored if prefixed with a pseudo-class selector | ||||||
---|---|---|---|---|---|---|---|
Product: | WebKit | Reporter: | Pierre Mazière <pierre.maziere> | ||||
Component: | CSS | Assignee: | Nobody <webkit-unassigned> | ||||
Status: | UNCONFIRMED --- | ||||||
Severity: | Normal | CC: | 7raivis, allyouneedis, kling, laszlo.gombos, nison.mael | ||||
Priority: | P2 | ||||||
Version: | 528+ (Nightly build) | ||||||
Hardware: | PC | ||||||
OS: | Linux | ||||||
Attachments: |
|
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 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/ It is still not fixed on Chrome 21.0.1139.2 canary and works fine on Firefox 12.0 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> 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. |
Created attachment 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