New issue
Advanced search Search tips
Starred by 3 users
Status: Fixed
Owner:
Closed: Mar 2016
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 2
Type: Compat



Sign in to add a comment
CSS transform is not treated properly in SVG
Reported by k...@asamuzak.jp, Mar 5 2016 Back to list
UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2667.0 Safari/537.36

Example URL:
http://asamuzak.jp/test/svg_interactive_chrome_issue

Steps to reproduce the problem:
1. Open attached file (text/html).
2. There are 3 demos.
   A. Put pointer (mouse) over 1st circle. Then move out.
   B. Click button for 2nd circle. Then click again.
   C. Click button for 3rd circle. Then click again.

What is the expected behavior?
Every circle should move to right bottom on hover (A) or click event (B, C).
Then go back to center again on pointer out or second click.

What went wrong?
All Circle stays at right bottom.

Does it occur on multiple sites: N/A

Is it a problem with a plugin? N/A 

Did this work before? N/A 

Does this work in other browsers? N/A 

Chrome version: 51.0.2667.0  Channel: canary
OS Version: 10.0
Flash Version: Shockwave Flash 21.0 r0

When CSS `transform` is once applied in SVG, transform effect remains even after transform value is set to `none`.
Firefox works well.
 
svg_interactive_chrome_issue.htm
1.8 KB View Download
Comment 1 by k...@asamuzak.jp, Mar 6 2016
Reproduce issue on Ubuntu + Chromium too.

Comment 2 by f...@opera.com, Mar 7 2016
Components: Blink>SVG
Labels: -OS-Windows OS-All
Status: Available
Comment 3 by f...@opera.com, Mar 7 2016
Owner: f...@opera.com
Status: Assigned
Comment 5 by f...@opera.com, Mar 7 2016
Status: Fixed
Sign in to add a comment