Bug 141789 – Updating :checked pseudo-class with next-sibling combinator can intermittently fail to re-render background SVG images with transition

• Component: CSS
• Status: NEW

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

This is still reproducible in the latest Safari Technology Preview (56) and Safari 11.1.

Updated test case: https://codepen.io/Krinkle/full/XYWjRZ

Expected: Ticking a checkbox makes the tick appear. Unticking a checkbox makes the tick disappear.

Actual: The initial state seems to work, but any input from the user is either ignored or applied without the tick appearing.

This works as expected in Chrome, Firefox and Edge.

Triaging as affecting all Hardware/OS (this issue is reproducible on Mobile Safari/iPhone as well).

Tentatively raising important as the impact of this is user confusion and potentially corrupted or unintentional destructive actions, due to the user unable to see whether a checkbox is ticked or unticked.

This may affect any number of UI libraries that customise the style of checkboxes on the web.

[Ryosuke Niwa]

Hm... the URL posted are 404 now. Could you attach a reduced test case if you still have access to it?

[Derk-Jan Hartman]

@Ryosuke Try the link in the 2018 comment, that still works for me.

[Ryosuke Niwa]

Created attachment 347296 [details]
Reduction

[Ryosuke Niwa]

(In reply to Derk-Jan Hartman from comment #4)
> @Ryosuke Try the link in the 2018 comment, that still works for me.

Thanks. I was able to make a reduction based on this.

This is a very convoluted bug. It seems to only reproduce with background SVG images and only when transition is specified. It might be some sort of an animation bug.

[Ryosuke Niwa]

Created attachment 347298 [details]
Better reduction

[Radar WebKit Bug Importer]

<rdar://problem/43394425>

[Ryosuke Niwa]

On STP63, you may need to reload "better reduction" 4-5 times before you can reproduce it once.

[Ryosuke Niwa]

It looks like this is a painting or a layout issue because even when the green box fails to render, the computed style of the span has "200% 200%" as the background size.

[Antoine Quint]

We hit this ASSERT when the test fails:

// FIXME: This doesn't take into account the animation timeline so animations will not
// restart on page load, nor will two animations in different pages have different timelines.
Image* SVGImageCache::imageForRenderer(const RenderObject* renderer) const
{
    auto* image = findImageForRenderer(renderer);
    if (!image)
        return &Image::nullImage();
    ASSERT(!image->size().isEmpty());
    return image;
}

So this does seem related to animations. I think Said should take a look and advise as I'm not sure how the SVGImageCache should relate to animations.