New issue
Advanced search Search tips
Starred by 3 users

Issue metadata

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

Issue description

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 (was: Unconfirmed)

Comment 3 by f...@opera.com, Mar 7 2016

Owner: f...@opera.com
Status: Assigned (was: Available)

Comment 5 by f...@opera.com, Mar 7 2016

Status: Fixed (was: Assigned)

Sign in to add a comment