192553 2018-12-10 03:58:51 -0800 SVG transform is not removed properly when a style with a CSS transform becomes inactive 2023-02-10 01:48:44 -0800 1 1 1 Unclassified WebKit SVG Safari Technology Preview Unspecified macOS 10.14 RESOLVED CONFIGURATION CHANGED BrowserCompat, InRadar P2 Normal --- 1 kari.pihkala webkit-unassigned ahmad.saleem792 karlcow sabouhallawa simon.fraser webkit-bug-importer zimmermann oldest_to_newest 1486535 0 356954 kari.pihkala 2018-12-10 03:58:51 -0800 Created attachment 356954 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 1486536 1 kari.pihkala 2018-12-10 04:18:35 -0800 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 1486728 2 webkit-bug-importer 2018-12-10 14:05:40 -0800 <rdar://problem/46607710> 1925556 3 ahmad.saleem792 2023-01-14 06:17:19 -0800 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! 1925723 4 karlcow 2023-01-15 17:47:13 -0800 This is working for me too. 1932586 5 kari.pihkala 2023-02-10 01:48:44 -0800 This is also working for me now. I tested Safari 16.3. Great! 356954 2018-12-10 03:58:51 -0800 2018-12-10 03:58:51 -0800 webkit-transform-bug.svg test case webkit-transform-bug.svg image/svg+xml 391 kari.pihkala PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxz dmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNDAwIDQw MCI+Cgo8c3R5bGU+CiNyZWN0YW5nbGU6aG92ZXIgeyB0cmFuc2Zvcm06IHRyYW5zbGF0ZSgxMHB4 LCAxMHB4KSBzY2FsZSgyLCAyKTsgfQo8L3N0eWxlPgoKPHJlY3QgaWQ9InJlY3RhbmdsZSIgd2lk dGg9IjEwIiBoZWlnaHQ9IjEwIiBmaWxsPSIjMDAwMGZmIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgx MCwxMCkiLz4KPHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiBzdHJva2U9IiM4MDgwODAiIGZp bGw9Im5vbmUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEwLDEwKSIvPgoKPC9zdmc+Cg==