New issue
Advanced search Search tips
Starred by 3 users

Issue metadata

Status: Fixed
Owner: ----
Closed: Feb 2015
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Windows , Mac
Pri: 2
Type: Bug



Sign in to add a comment

CSS animation with transform and opacity alone is broken.

Reported by cont...@benfrain.com, Nov 14 2013

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1707.0 Safari/537.36

Example URL:
http://codepen.io/benfrain/pen/hLFwn

Steps to reproduce the problem:
1. Open URL
2. Witness problem
3.

What is the expected behavior?
Defined animation properties should all animate

What went wrong?
It should be possible to animate two CSS properties on an SVG with a CSS animation. This behaviour can be seen in Firefox but Chrome (and Safari) only render the last defined property.

Does it occur on multiple sites: N/A

Is it a problem with a plugin? No 

Did this work before? N/A 

Does this work in other browsers? Yes Firefox 25

Chrome version: 33.0.1707.0  Channel: dev
OS Version: OS X 10.8.5
Flash Version: Shockwave Flash 11.9 r900

 

Comment 1 by meh...@chromium.org, Nov 14 2013

Labels: Cr-Blink Cr-Blink-SVG
Cc: nyerramilli@chromium.org
Labels: -Via-Wizard -Type-Compat Type-Bug OS-Windows M-33
Status: Untriaged
Able to reproduce this issue on Win7,33.0.1712.3 (Official Build 235832) canary, Stable 	31.0.1650.57 (Official Build 235101) 

Not a regression, issue existing from M24 build.

Comment 3 by pdr@chromium.org, Nov 19 2013

Status: Available
Summary: CSS animation with transform and opacity alone is broken. (was: When a CSS Animation is applied to a SVG path that has two property changes, only the last defined property is animated.)
Thank you for taking the time to file this. What a bizarre bug!

I've attached a minimized testcase. It looks like specifying fill in the animation fixes the problem?
test.html
1.2 KB View Download
Yes, that's an easy enough workaround. I updated my original question on Stack Overflow with the workaround and added the info to the Codepen example so hopefully anyone who hits will be able to sort. Thanks.
Labels: Cr-Blink-Animation
Project Member

Comment 6 by bugdroid1@chromium.org, Dec 17 2013

Labels: -M-33 MovedFrom-33 M-34
Status: Untriaged
Moving all non essential bugs to the next Milestone.

Comment 7 by dxie@chromium.org, Mar 3 2014

Labels: -M-34 MovedFrom-34
This issue has already been moved once and is lower than Priority 1,therefore removing mstone.
The workaround does not currently work.

I've attached a vendor prefixed version of the original demo.

The codepen referenced above uses a different workaround. It splits the animation between the element and a new wrapper element. link: http://codepen.io/Fernker/pen/BjzFt

However, in firefox, this new workaround resets the transform-origin property to 0 0. This is due to a firefox bug involving nesting an animated svg inside another animated svg. There seems to be no cross browser fix to this. :(

A bizarre bug indeed.
test.html
2.4 KB View Download
actually...
animating the fill color's alpha value instead of the opacity property seems to work pretty well.
Status: Fixed
The original CodePen test case http://codepen.io/benfrain/pen/hLFwn is working in Chrome 40. Both transform and opacity animate on the SVG element.

Sign in to add a comment