[Webkit-unassigned] [Bug 141789] New: The :checked pseudo-class fails intermittently when used with next-sibling combinator (+)

bugzilla-daemon at webkit.org bugzilla-daemon at webkit.org
Wed Feb 18 19:13:26 PST 2015


https://bugs.webkit.org/show_bug.cgi?id=141789

            Bug ID: 141789
           Summary: The :checked pseudo-class fails intermittently when
                    used with next-sibling combinator (+)
    Classification: Unclassified
           Product: WebKit
           Version: 528+ (Nightly build)
          Hardware: Unspecified
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: krinklemail at gmail.com

Reduced test case: http://s.codepen.io/Krinkle/debug/JoLyzx (Source code: http://codepen.io/Krinkle/pen/JoLyzx?editors=110)

The check mark often does not appear when clicking the checkbox.

Reproduced with:
* Safari 7.1.3 (9537.85.12.18), AppleWebKit/600.3.18, OSX 10.9.5
* Safari 8.0 (10600.1.25.1), AppleWebKit/600.1.25, OSX 10.10.1
* WebKit Nightly r180270, AppleWebKit/601.1.19+, OSX 10.9.5

The node's `checked` property is toggling, and the native checkbox's appearance is updated. But surrounding elements that should match via the `:checked` selector are ignored. While trivial in this example (given the native checkbox), this technique is used by UI libraries to replace the appearance of the native checkbox (CSS-only; using opacity and z-index). There, the user would perceive the checkbox as being broken (never reaching the checked state).

We narrowed it down to:
* Selector `input[type="checkbox"]:checked + span`.
* The checkbox in question has no custom styling (user agent default).
* The targeted element is a `<span>` with:
 * transition on background-size
 * background-color
 * one background-image using SVG

The bug is evaded by either: removing the transition, or removing the background-color, or using a PNG instead of SVG, or creating a second background alongside the SVG (e.g. a dummy transparent gradient).

-------

Downstream report:
 https://phabricator.wikimedia.org/T89309#1048894

See also:
 https://bugs.webkit.org/show_bug.cgi?id=17680

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20150219/2c984e5e/attachment-0002.html>


More information about the webkit-unassigned mailing list