Home Dashboard Directory Help

[IE 11] CSS transition property not working for SVG elements by rampkalle


Status: 

Closed
 as External Help for as External


Type: Bug
ID: 920928
Opened: 7/15/2014 3:42:59 AM
Access Restriction: Public
0
Workaround(s)
view
9
User(s) can reproduce this bug

Description

The CSS transition property doesn't work for SVG elements, e.g. for changing a polygon's "fill" property.

Seemingly broken on IE11. Works on FF30 and Chrome 35.
Details
Sign in to post a comment.
Posted by Microsoft on 4/4/2016 at 2:15 PM
We've moved! This issue is now being tracked at https://developer.microsoft.com/microsoft-edge/platform/issues/614493/
Posted by AkaPaul88 on 12/6/2015 at 9:53 PM
Hello!

I've tried to reproduce the sample, described in issue again, and it seems to reproduce. Here is a plunker for it http://plnkr.co/edit/mTZQ0WFKhCEsY6aegcLs?p=preview. I used Internet Explorer 11 to test. In Edge it works fine
Posted by Waruyama on 6/18/2015 at 11:11 PM
This is not limited to the "fill" property.

Here is a very incomplete list of SVG properties that do not work with transitions:
fill, stroke, stroke-width, stroke-opacity

Interestingly transitions work for the "opacity" property.
Posted by RichB123 on 3/7/2015 at 8:20 AM
It's a shame that this doesn't work, it would be great if it did.
Posted by Capro22340 on 10/23/2014 at 2:58 PM
I am running into the issue as well, and both of the examples on jsfiddle perfectly display the issue.
Posted by Kimmo Brunfeldt on 10/12/2014 at 5:25 AM
Bug reproduces for me too. IE11 does not animate the transition which can be seen from these screencasts: http://imgur.com/a/6cipg
Posted by Andy Mercer on 8/25/2014 at 10:44 AM
Here is very clear example. The rect elements are animated on Chrome and FF, and not moving at all on IE: http://codepen.io/Kelderic/pen/gALlC
Posted by eisenpony on 8/18/2014 at 8:25 PM
http://jsfiddle.net/f0pxrgsq/
There is a clear difference. The 2 second transition is not honored in IE 11 but is in firefox and chrome.
Posted by daMperor on 8/18/2014 at 3:50 AM
Here is the same sample, just a bit more obvious. http://jsfiddle.net/o4trrh06/4
Posted by rampkalle on 7/15/2014 at 3:57 PM
The code I provided still produces the bug. The div element will fade on hover, while the polygon switches color immediately.

I suppose you could increase the transition duration from "0.5s" to "2s" to make the discrepancy more evident.
Posted by Microsoft on 7/15/2014 at 8:41 AM
Thank you for your feedback!

After testing your code, I am having difficulty identifying a difference
in the behavior between IE11, DC1, FF or Chrome. Could you take a second
look at your code and if the issue still reproduces, please provide more details on
the difference between IE's rendering and other browsers.

Best Regards,
The Internet Explorer Team
Sign in to post a workaround.
File Name Submitted By Submitted On File Size  
ie-not-working3.gif 10/12/2014 102 KB
firefox-working.gif 10/12/2014 171 KB
chrome-working.gif 10/12/2014 154 KB