Bug 183433 - SVG transitions of transforms are not properly reset after the transition is removed
Summary: SVG transitions of transforms are not properly reset after the transition is ...
Status: RESOLVED CONFIGURATION CHANGED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Animations (show other bugs)
Version: WebKit Nightly Build
Hardware: Mac macOS 10.13
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2018-03-08 00:29 PST by i.love.comput3rs
Modified: 2023-05-10 12:36 PDT (History)
6 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description i.love.comput3rs 2018-03-08 00:29:29 PST
Please see this codepen: https://codepen.io/ilovecomputers/pen/Nydowg

1. The top two bars are SVG while the bottom two are DIVs. 
2. Click the animate button and wait for the animation to finish.
  a. Note the animation is synced between the two types
3. Click the animate button again.
  a. Note the animation is no longer synced as the transform of the white wipe bar is not reset

I've tried this in Safari 11.0.3 (13604.5.6), Tech Preview Release 51 (Safari 11.2, WebKit 13606.1.6), and the Nightly. Same behavior. The current Chrome and Firefox do not exhibit this behavior.
Comment 1 Radar WebKit Bug Importer 2018-03-08 21:23:01 PST
<rdar://problem/38289968>
Comment 2 i.love.comput3rs 2018-03-30 10:10:50 PDT
Here is a workaround: https://codepen.io/ilovecomputers/pen/YaajWJ

Note the `resetSVGTransforms` function. It toggles a non-visual transform in two frames.
Comment 3 Antoine Quint 2023-05-10 12:36:08 PDT
Demo works fine in shipping Safari.