141789 2015-02-18 19:13:26 -0800 Updating :checked pseudo-class with next-sibling combinator can intermittently fail to re-render background SVG images with transition 2026-01-12 09:02:13 -0800 1 1 1 Unclassified WebKit CSS Safari Technology Preview All All NEW InRadar P2 Normal --- 1 krinklemail webkit-unassigned dino graouts hartman.wiki koivisto rniwa sabouhallawa simon.fraser volker webkit-bug-importer zalan oldest_to_newest 1070323 0 krinklemail 2015-02-18 19:13:26 -0800 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 1428056 1 krinklemail 2018-05-29 05:15:16 -0700 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. 1428057 2 krinklemail 2018-05-29 05:18:15 -0700 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. 1450559 3 rniwa 2018-08-15 19:18:14 -0700 Hm... the URL posted are 404 now. Could you attach a reduced test case if you still have access to it? 1450637 4 hartman.wiki 2018-08-16 01:47:03 -0700 @Ryosuke Try the link in the 2018 comment, that still works for me. 1450838 5 347296 rniwa 2018-08-16 13:30:30 -0700 Created attachment 347296 Reduction 1450840 6 rniwa 2018-08-16 13:31:24 -0700 (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. 1450843 7 347298 rniwa 2018-08-16 13:35:21 -0700 Created attachment 347298 Better reduction 1450845 8 webkit-bug-importer 2018-08-16 13:36:25 -0700 <rdar://problem/43394425> 1450846 9 rniwa 2018-08-16 13:37:22 -0700 On STP63, you may need to reload "better reduction" 4-5 times before you can reproduce it once. 1450847 10 rniwa 2018-08-16 13:39:03 -0700 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. 1451105 11 graouts 2018-08-17 07:09:13 -0700 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. 347296 2018-08-16 13:30:30 -0700 2018-08-16 13:35:21 -0700 Reduction bug141789.html text/html 781 rniwa PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8Ym9keT4KPHN0eWxlPgpzcGFuIHsKICAgIGNvbG9yOiBy ZWQ7CiAgICBib3JkZXI6IHNvbGlkIDFweCBibGFjazsKICAgIHBhZGRpbmc6IDFyZW07CiAgICBi YWNrZ3JvdW5kLXNpemU6IDAgMDsKICAgIGJhY2tncm91bmQtaW1hZ2U6IHVybCgnaHR0cHM6Ly9z dm4ud2Via2l0Lm9yZy9yZXBvc2l0b3J5L3dlYmtpdC90cnVuay9MYXlvdXRUZXN0cy9zdmcvYXMt aW1hZ2UvcmVzb3VyY2VzLzEwMHB4LWdyZWVuLXJlY3Quc3ZnJyk7CiAgICBiYWNrZ3JvdW5kLXBv c2l0aW9uOiBsZWZ0IHRvcDsKICAgIGJhY2tncm91bmQtcmVwZWF0OiBuby1yZXBlYXQ7CiAgICB0 cmFuc2l0aW9uOiBiYWNrZ3JvdW5kLXNpemUgMC4xcyBjdWJpYy1iZXppZXIoMC4xNzUsIDAuODg1 LCAwLjMyLCAxLjI3NSk7Cn0KCmlucHV0W3R5cGU9ImNoZWNrYm94Il06Y2hlY2tlZCArIHNwYW4g ewogICAgY29sb3I6IGdyZWVuOwogICAgYmFja2dyb3VuZC1zaXplOiAyMDAlIDIwMCU7Cn0KCjwv c3R5bGU+CjxkaXY+PGlucHV0IHR5cGU9ImNoZWNrYm94Ij48c3Bhbj5YPC9zcGFuPjwvZGl2Pgo8 c2NyaXB0Pgpjb25zdCBjaGVja2JveCA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJ2lucHV0Jyk7 CmNoZWNrYm94LmNoZWNrZWQgPSB0cnVlOwpmb3IgKGxldCBpID0gMDsgaSA8IDEwOyBpKyspIHsK ICAgIHNldFRpbWVvdXQoKCkgPT4gY2hlY2tib3guY2hlY2tlZCA9ICFjaGVja2JveC5jaGVja2Vk LCBpICogMTAwKTsKfQo8L3NjcmlwdD4KPC9ib2R5Pgo8L2h0bWw+Cg== 347298 2018-08-16 13:35:21 -0700 2018-08-16 13:35:21 -0700 Better reduction bug141789.html text/html 832 rniwa PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8Ym9keT4KPHN0eWxlPgpzcGFuIHsKICAgIGNvbG9yOiBy ZWQ7CiAgICBiYWNrZ3JvdW5kLXNpemU6IDAgMDsKICAgIGJhY2tncm91bmQtaW1hZ2U6IHVybCgn aHR0cHM6Ly9zdm4ud2Via2l0Lm9yZy9yZXBvc2l0b3J5L3dlYmtpdC90cnVuay9MYXlvdXRUZXN0 cy9zdmcvYXMtaW1hZ2UvcmVzb3VyY2VzLzEwMHB4LWdyZWVuLXJlY3Quc3ZnJyk7CiAgICBiYWNr Z3JvdW5kLXBvc2l0aW9uOiBsZWZ0IHRvcCAyMCU7CiAgICBiYWNrZ3JvdW5kLXJlcGVhdDogbm8t cmVwZWF0OwogICAgdHJhbnNpdGlvbjogYmFja2dyb3VuZC1zaXplIDAuMXMgY3ViaWMtYmV6aWVy KDAuMTc1LCAwLjg4NSwgMC4zMiwgMS4yNzUpOwp9CgppbnB1dFt0eXBlPSJjaGVja2JveCJdOmNo ZWNrZWQgKyBzcGFuIHsKICAgIGNvbG9yOiBncmVlbjsKICAgIGJhY2tncm91bmQtc2l6ZTogMjAw JSAyMDAlOwp9Cgo8L3N0eWxlPgo8cD5UaGlzIHRlc3RzIHJlcGVhdGVkbHkgdXBkYXRpbmcgOmNo ZWNrZWQgc3RhdGUuIFlvdSBzaG91bGQgc2VlIGEgZ3JlZW4gYm94IGJlbG93LCBub3QgWC48L3A+ CjxkaXY+PGlucHV0IHR5cGU9ImNoZWNrYm94Ij48c3Bhbj5YPC9zcGFuPjwvZGl2Pgo8c2NyaXB0 Pgpjb25zdCBjaGVja2JveCA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJ2lucHV0Jyk7CmNoZWNr Ym94LmNoZWNrZWQgPSB0cnVlOwpmb3IgKGxldCBpID0gMDsgaSA8IDEwOyBpKyspIHsKICAgIHNl dFRpbWVvdXQoKCkgPT4gY2hlY2tib3guY2hlY2tlZCA9ICFjaGVja2JveC5jaGVja2VkLCBpICog MTAwKTsKfQo8L3NjcmlwdD4KPC9ib2R5Pgo8L2h0bWw+Cg==