Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
rsysweb

SVG TweenMax rotation wrong behaviour in Firefox and IE

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

http://jsfiddle.net/rsysweb/HtXWp/

 

In Chrome as expected.

 

In Firefox the transformOrigin seems to be ignored.

 

In IE10 and lower the Animation doesn´t start.

 

What´s the problem ?

 

Thanks for your trouble in advance ....

Link to comment
Share on other sites

With some more investiongation I could determine that if the transformationOrigin in FF is set to Pixel Value it works somehow. But not satisfieing as the width and height of the object tend to vary, so the animation is not exactly to the point centered.

 

In IE I didn´t manage it to get this work. 

 

And also it´s not working under : OPERA Version 12.15  Build 1748  Platform Linux

 

Any help and comment is appreciated.

Link to comment
Share on other sites

Can you confirm this is a behaviour that´s not correct ?

 

When will it be fixed as it seems to me quite a mayor issue ? 

 

Cheers David

Link to comment
Share on other sites

Hey David. Unfortunately we can't really fix all browser problems, as it seems Firefox clearly has a bug that causes it to misinterpret percentage-based transformOrigin values for SVG elements as 0px (you can verify that by inspecting the element and looking at the computed values in Firefox). This has nothing to do with GSAP - you can manually try setting it as well yourself and you'll see that Firefox just uses 0px 0px. As you discovered, the best workaround is to set px-based values instead of percentages. 

 

As far as IE, it was choking on what it determined was malformed SVG tags, complaining that they cannot be self-closing, plus you had extra markup that it was whining about as well (an extra doctype declaration and a tag that started with <?). But even when that was fixed, IE still didn't want to honor any changes to the SVG's css styles. Again, this has nothing to do with GSAP - it's an IE issue. You can try manually setting that element's style.transform or even style.width. Neither works. The best workaround in IE that I can think of is to put your SVG into a regular DIV that's sized the way you want, and then animate the DIV instead. That'd obviously work in other browsers as well. 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×