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.
* Safari 7.1.3 (9518.104.22.168), 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
* 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).
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.
Hm... the URL posted are 404 now. Could you attach a reduced test case if you still have access to it?
@Ryosuke Try the link in the 2018 comment, that still works for me.
Created attachment 347296 [details]
(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.
Created attachment 347298 [details]
On STP63, you may need to reload "better reduction" 4-5 times before you can reproduce it once.
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.
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);
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.