SVG transform is not removed properly when a style with a CSS transform becomes inactive

• Component: SVG
• Status: RESOLVED CONFIGURATION CHANGED

Created attachment 356954 [details]
webkit-transform-bug.svg test case

Transforms for SVG elements are not reset when a style with a CSS transform becomes inactive.

Steps to reproduce:

1. Open https://codepen.io/anon/pen/QzwLyG?editors=1100 (or the attached test case which shows the same test)
2. Move the mouse over the blue box - it is scaled by 2. (using :hover style)
3. Move the mouse out of the blue box - the transform isn't set back to the initial non-scaled transform.

This works in Firefox 63 and Chrome 71. The blue box returns to the initial non-scaled transform.

The bug doesn't happen if the initial transform is given as a style in the stylesheet. The bug is visible only when setting the initial transform as an attribute. So, there seems to be something wrong how the transform attribute is handled.

Tested on Safari Technology Preview Release 71 (Safari 12.1, WebKit 14607.1.15). At least Safari 12.0 and 11 have the same bug.

Possibly related bugs (the SVG transform attribute has been promoted to a presentation attribute only recently):

Transforms tracking bug
https://bugs.webkit.org/show_bug.cgi?id=15670

Harmonize HTML & SVG rendering
https://bugs.webkit.org/show_bug.cgi?id=90738

Merge CSS and SVG Transforms according to CSS3 Transforms
https://bugs.webkit.org/show_bug.cgi?id=70025

Master bug: Turn more SVG attributes to presentation attributes
https://bugs.webkit.org/show_bug.cgi?id=135045

Scaled SVG elements are leaving artifacts during animation
https://bugs.webkit.org/show_bug.cgi?id=177524

SVG transitions of transforms are not properly reset after the transition is removed
https://bugs.webkit.org/show_bug.cgi?id=183433

This codepen shows that the opacity, width and height presentation attributes work just fine in a similar situation. So, the issue seems to be specific to the transform attribute and property.

https://codepen.io/anon/pen/WLbeqd?editors=1100

[Radar WebKit Bug Importer]

<rdar://problem/46607710>

[Ahmad Saleem]

Attached Test case and test case from Comment 01 seems to work fine in Safari 16.2 and Safari Technology Preview 161 and after leaving mouse out, the blue box return back to initial state.

Appreciate if someone can confirm since I am not able to reproduce this. Thanks!

[Karl Dubost]

This is working for me too.

This is also working for me now. I tested Safari 16.3. Great!