Jump to content


Having issues across browsers

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



I've just stared working with GS in Javascript and so far love the ease of use and its flexibility. However, after testing my animations in different browsers, I've been encountering problems with certain parts. Everything was working great in Chrome, but Safari and Firefox seems to render things differently, such as elements that are misplaced in Firefox, or some that don't even show up in Safari.


Any idea what can be causing these compatibility issues?


Please, check the link below:



Thank you

Link to comment
Share on other sites

Hmm, your example is quite complex, but I'm guessing this is an issue with the transform-origin on SVG elements? It could possibly be related to this issue:


Perhaps you could try wrapping the SVG element in a div and transforming the div instead?

If that's no help could you please reduce your example to just include the SVG elements that aren't animating as you intend (and the related tweens)?

  • Like 3
Link to comment
Share on other sites

Hi and welcome to the GreenSock forums


First, excellent job on the banner it looks fantastic!


Second, I loaded it up in Safari, FireFox and Chrome side-by-side and watched a bunch of times.

I didn't see anything amiss. Are there drastic variances or is it something more subtle?

Doe is it happen repeatedly?


In this case I would suggest that you narrow down the areas that are wonky and strip out everything else. With everything moving around so fast, its probably just difficult for someone seeing your ad for the first time to catch and diagnose the issue.


Perhaps a screen grab of the frames that are off would help too.




Ah, it seems Jamie, once again is a little quicker and more observant than me;)

Link to comment
Share on other sites


Thank you for the quick responses. I've been finally able to fix some of the problems by animating only the opacity property, instead of scaleX, scaleY and x,y coordinates. Before doing so, I tried to wrap those svgs in div elements. While the issue was solved in Firefox, it caused the svgs elements to be misplaced in Chrome. Please, look at attached images.



SVGs in Chrome look great.



SVGs in Firefox are misplaced.


Another problem I'm having is that some SVGs don't show up in Safari. Still working on those.






Chrome and Firefox.






Chrome and Firefox.


As you can see, some of these issues are pretty subtle, but we have to make sure that these banners look as close as possible across different browsers. Our goal is to switch form Flash to HTML and JS in order to be compatible with all mobile devices.


Thank you!

Link to comment
Share on other sites

Finally, I found what the problem was. It didn't have anything to do with GreenSock at all, but the SVGs and the way different browsers render these elements. In some of them, I was missing part of code that comes by default with the SVGs, and while it was fine in Chrome, Firefox and Safari wouldn't render the SVG properly.


Here is the final piece: http://jsbin.com/xapiguxo/14 I added a few control buttons to play and stop the animation at any time.


Thank you for your time!

  • Like 2
Link to comment
Share on other sites

Glad you figured it out! 

It seems SVG has a lot of promise but is a bit tricky in the browser-compatability department.

Frankly, I don't know all the nuances myself yet.


Thanks for posting your results as I'm sure it could help folks with similar problems.


Again, the animation looks REALLY nice, I might even say its the best HTML5 banner I've seen.


If you have the desire and clearance for us to share it with folks, please let us know.



Link to comment
Share on other sites

On the chance the final version doesn't stick around forever, it looks like the svg tag requirements were something like this:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="367px" height="367px" viewBox="0 0 367 367"
     enable-background="new 0 0 367 367" xml:space="preserve">
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.