Bug 192553 - SVG transform is not removed properly when a style with a CSS transform becomes inactive
Summary: SVG transform is not removed properly when a style with a CSS transform becom...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: SVG (show other bugs)
Version: Safari Technology Preview
Hardware: Unspecified macOS 10.14
: P2 Normal
Assignee: Nobody
Keywords: BrowserCompat, InRadar
Depends on:
Reported: 2018-12-10 03:58 PST by kari.pihkala
Modified: 2018-12-10 14:05 PST (History)
4 users (show)

See Also:

webkit-transform-bug.svg test case (391 bytes, image/svg+xml)
2018-12-10 03:58 PST, kari.pihkala
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
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