Bug 192553

Summary: SVG transform is not removed properly when a style with a CSS transform becomes inactive
Product: WebKit Reporter: kari.pihkala
Component: SVGAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: sabouhallawa, simon.fraser, webkit-bug-importer, zimmermann
Priority: P2 Keywords: BrowserCompat, InRadar
Version: Safari Technology Preview   
Hardware: Unspecified   
OS: macOS 10.14   
Description Flags
webkit-transform-bug.svg test case none

Description kari.pihkala 2018-12-10 03:58:51 PST
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

Harmonize HTML & SVG rendering

Merge CSS and SVG Transforms according to CSS3 Transforms

Master bug: Turn more SVG attributes to presentation attributes

Scaled SVG elements are leaving artifacts during animation

SVG transitions of transforms are not properly reset after the transition is removed
Comment 1 kari.pihkala 2018-12-10 04:18:35 PST
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.

Comment 2 Radar WebKit Bug Importer 2018-12-10 14:05:40 PST