Summary: | CSS animations in SVG do not repaint when SVG is zoomed | ||||||
---|---|---|---|---|---|---|---|
Product: | WebKit | Reporter: | jstsch <joost> | ||||
Component: | SVG | Assignee: | Nobody <webkit-unassigned> | ||||
Status: | NEW --- | ||||||
Severity: | Normal | CC: | ahmad.saleem792, sabouhallawa, simon.fraser, tanaka.toshiyuki, webkit-bug-importer, zimmermann | ||||
Priority: | P2 | Keywords: | BrowserCompat, InRadar | ||||
Version: | WebKit Nightly Build | ||||||
Hardware: | All | ||||||
OS: | macOS 12 | ||||||
Attachments: |
|
Description
jstsch
2019-07-01 07:42:28 PDT
Just would like to confirm that this issue still remains in Safari 14. A real-world example can be seen here. Observe that by dragging any of the words or resizing the window that the lines start to animate. https://explorer-mag.nationalgeographic.org/voyager_november_december_2020/words_to_explore Just encountered this issue again. A (terrible) workaround is to manipulate the opacity of the element each frame slightly to ensure it gets repainted. I modified the test case so the SVG animated elements get 'jiggled' using requestAnimationFrame. Not so performant, of course... https://jstsch.com/misc/2019/7/safari-svg-zoom.html (using a keyframe animation to manipulate the opacity didn't force a repaint, but manipulating the style attribute does) Confirmed that Safari TP 138 / WebKit 17613.1.12.1.12 still features this issue I tried to fix this bug in following PR: https://github.com/WebKit/WebKit/pull/4727 by merging following Blink commit: https://src.chromium.org/viewvc/blink?view=revision&revision=174874 NOTE - Webkit has currently two parallel SVG implementations: 1) Legacy 2) New Layer Based (LBSE) Blink patch was modifying code present in LBSE layer (might be common code moved from Legacy to be reused in LBSE). Based on my discussion with @Said on the PR, it seems that Blink patch is not addressing this CSS animation bug which is kind of repairing / style invalidation issue. Similarly, Blink commit is also not fixing this case and even the test case with it is not showing any clear expected output to reflect what is being fixed with this patch. This PR compiles and does not have any failed test case. Additional note - if I try to take newer code of this test case from Blink / Chromium source, it uses 'rAf' but using updated test script, which leverages some tooling not available in Webkit so we cannot take as is Blink / Chromium latest test case and test in Webkit infrastructure. Just wanted to document the attempt while I try to investigate in background. Thanks! (In reply to Ahmad Saleem from comment #6) > I tried to fix this bug in following PR: > > https://github.com/WebKit/WebKit/pull/4727 > > by merging following Blink commit: > > https://src.chromium.org/viewvc/blink?view=revision&revision=174874 > > NOTE - Webkit has currently two parallel SVG implementations: > > 1) Legacy > 2) New Layer Based (LBSE) > > Blink patch was modifying code present in LBSE layer (might be common code > moved from Legacy to be reused in LBSE). > > Based on my discussion with @Said on the PR, it seems that Blink patch is > not addressing this CSS animation bug which is kind of repairing / style > invalidation issue. > > Similarly, Blink commit is also not fixing this case and even the test case > with it is not showing any clear expected output to reflect what is being > fixed with this patch. > > This PR compiles and does not have any failed test case. > > Additional note - if I try to take newer code of this test case from Blink / > Chromium source, it uses 'rAf' but using updated test script, which > leverages some tooling not available in Webkit so we cannot take as is Blink > / Chromium latest test case and test in Webkit infrastructure. > > Just wanted to document the attempt while I try to investigate in > background. Thanks! I built local WebKit Release build based of (259195@main) with and without this Blink merge and this blink merge indeed fix the test case mentioned in the Comment 0. I know Blink patch might be flaky but if everyone is happy for me to fix this without test case, I am happy to do PR. (In reply to Ahmad Saleem from comment #7) > (In reply to Ahmad Saleem from comment #6) > > I tried to fix this bug in following PR: > > > > https://github.com/WebKit/WebKit/pull/4727 > > > > by merging following Blink commit: > > > > https://src.chromium.org/viewvc/blink?view=revision&revision=174874 > > > > NOTE - Webkit has currently two parallel SVG implementations: > > > > 1) Legacy > > 2) New Layer Based (LBSE) > > > > Blink patch was modifying code present in LBSE layer (might be common code > > moved from Legacy to be reused in LBSE). > > > > Based on my discussion with @Said on the PR, it seems that Blink patch is > > not addressing this CSS animation bug which is kind of repairing / style > > invalidation issue. > > > > Similarly, Blink commit is also not fixing this case and even the test case > > with it is not showing any clear expected output to reflect what is being > > fixed with this patch. > > > > This PR compiles and does not have any failed test case. > > > > Additional note - if I try to take newer code of this test case from Blink / > > Chromium source, it uses 'rAf' but using updated test script, which > > leverages some tooling not available in Webkit so we cannot take as is Blink > > / Chromium latest test case and test in Webkit infrastructure. > > > > Just wanted to document the attempt while I try to investigate in > > background. Thanks! > > I built local WebKit Release build based of (259195@main) with and without > this Blink merge and this blink merge indeed fix the test case mentioned in > the Comment 0. > > I know Blink patch might be flaky but if everyone is happy for me to fix > this without test case, I am happy to do PR. It might be because we also removed "useZoomRules" quirk with this commit on border-width that this patch now works: https://github.com/WebKit/WebKit/commit/e7f78cb4cd8136f0b3c6e0c02b36009022514452 Created attachment 464674 [details]
Local Build showing fixed test-case
|