Issue metadata
Sign in to add a comment
|
SVG scale changes during css animation if path fill color changes
Reported by
ranb...@gmail.com,
Jun 20 2017
|
||||||||||||||||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Steps to reproduce the problem: 1. Go to https://ranbuch.github.io/flat-gauge-js/samples/tune/index.html 2. Change the range input next to the word "needle" (best using up and down arrows). 3. If you change the input value from 29 to 30 (or vice versa) the needle changes it's color. 4. When the color changes the needle is changing it's scale (length). What is the expected behavior? The needle shouldn't change her scale (length). What went wrong? When css animation (transform: rotate() scale()) is mixed with change in the "SVG path" color fill it causes the scale the change (maybe setting it to 1). Did this work before? N/A Chrome version: 58.0.3029.110 Channel: stable OS Version: 10.0 Flash Version: Cannot reproduce this issue on Edge or Firefox.
,
Jun 22 2017
I can't reproduce this on Chrome 60 on either Win 10 or Linux. Could you please try Chrome Canary and see if th eissue is fixed (Chrome Canary will not mess with your existing Chrome profiles and can be used alongside Chrome Stable.
,
Jun 23 2017
I've downloaded Chrome Canary and the issue still reproduces.
,
Jun 23 2017
Thank you for providing more feedback. Adding requester "schenney@chromium.org" to the cc list and removing "Needs-Feedback" label. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Jun 26 2017
I'm able to reproduce this issue on Win7 64-bit, Mac OS X 10.12.5 and Linux Ubuntu 14.04. This issue exists across all channels and i'm seeing the similar behavior from ~ M39. Thank you!
,
Jun 27 2017
I'm unable to repro this on Linux Chrome 59, 60 or 61. Could you attach screenshots of the bug (needle at 29 and 30) please? I've attached what I observe.
,
Jun 27 2017
Never-mind please. Seems like my eyes have cheated me, however there is still some difference in M39 version of chrome vs latest one on Win7? Thank you!
,
Jun 27 2017
Could the original bug reporter please provide screenshots of the bug? We're having trouble reproducing the issue.
,
Jun 27 2017
I've changed the code here: https://ranbuch.github.io/flat-gauge-js/samples/tune/index.html Now the transition duration is 1.5 seconds and the needle is longer - much easier to see. Please update me if there's something else I can do.
,
Jun 27 2017
Thank you for providing more feedback. Adding requester "alancutter@chromium.org" to the cc list and removing "Needs-Feedback" label. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Jun 27 2017
I notice that the needle goes blurry during the animation, is that the issue you're referring to? I still don't see it change scale/length between 29 and 30. Screenshots of the issue you're seeing here would help clear up ambiguity.
,
Jun 27 2017
Here's a link to a Youtube video: https://youtu.be/kT4jBdyYluU Please be sure to set the quality (resolution) to 1080p. Please update me if there's something else I can do.
,
Jun 27 2017
Thank you for providing more feedback. Adding requester "alancutter@chromium.org" to the cc list and removing "Needs-Feedback" label. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Jun 27 2017
I suspect this "shortening" of the length is actually due to the needle being blurred as its colour changes. When the needle changes colour a main thread animation plays animating the fill property. I suspect the blurring that occurs is related to the need to reraster the path on every frame and because the path has a scale(1.25) in its transform. I speculate that the main thread invoked rasterisation does not take into account the current animated transform value when deciding upon a bitmap size to rasterise to.
,
Jun 27 2017
There's also a large change in contrast (between the dial and its background) when animating from black to "light greenish", which would make the dial appear shorter. Consider checking when zoomed in 2 or 3 times.
,
Jul 3 2017
The NextAction date has arrived: 2017-07-03
,
Jun 27 2018
This issue has been Available for over a year. If it's no longer important or seems unlikely to be fixed, please consider closing it out. If it is important, please re-triage the issue. Sorry for the inconvenience if the bug really should have been left as Available. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Jun 27 2018
This seems to be working fine now. I don't see any issues at all on Win 10 Beta (M-68).
,
Jun 28 2018
I can't detect this issue anymore either. |
|||||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||||
Comment 1 by bokan@chromium.org
, Jun 22 2017