Jump to content
GreenSock

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

Strange issue in Chrome on OSX

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

FYI the issue was on Chrome with Windows too, but it happens 100% of the time on OSX Chrome

 

I have a ~30 second long timeline. I trigger a play and pause event depending on where you are on the page. If the animation is in view, it plays, if not, it pauses.

 

I was having an issue where on the footer of my page certain elements would disappear for some unknown reason. So I did around 2 hours of figuring out what it was, and I narrowed it down to some CSS animations I left looping (unrelated to GSAP). That made sense, it was performance draining and so the browser started to glitch. So instead I tied this animation to my timeline and it worked even better than before... but the issue remained.

 

Even when the timeline was paused, if the elements I was animating were stuck in a CSS transform in any way, elements on the page would disappear in Chrome OSX (100% of the time).

 

I fixed it by adding a class that set transform to none when the timeline pauses, and removed it when it played. This was the only way I could fix it.

 

I can't share the URL publicly, but I can post links to both versions via PM if it helps.

 

My main questions in regards to this:

  1. Is this a known issue at all?
  2. If you animate dozens of things at once (in my case, dozens of 6x6 little squares), is it likely to cause issues, even if the browser isn't using much memory/CPU?

It worked fine in every other browser. FF, Safari, IE, even IE9.

 

Thanks

Link to post
Share on other sites

Hi Phil,

 

We would love to help, but without being able to see a reduced case it is very hard to guess what could be going on. I understand you can't release the link but, do you think you could reproduce the issue on a separate link? We encourage people to make a CodePen to show their problems.

 

I would love to say that animating dozen of things at once is not likely to cause issues - as I and many others have done in the past. But, without seeing how and what you are animating, I do not feel confident in making such statement.

 

Since you are reporting this issue in a full fledged site, I will risk saying that the cause is unlikely to be GSAP related but something else hogging the CPU. I don't think many people will have the spare time to troubleshoot the whole site for you so, try recreating the basic animation on a separate place, that is not your site. See how it behaves. Then, start adding more layers of complexity until you find the issue. If, you recreate the whole animation in this separate place and it works fine then, you'll know something else in your site is the problem.

  • Like 1
Link to post
Share on other sites

The page will be live this Monday, I'll link it again then.

 

I wouldn't say it's GSAP related either, but it still happens when using certain CSS transforms through GSAP.

 

Attached is an image, the issue occurs any time the globe is spinning (using transform/translate) and the same for the dots (the dots are all divs with 50% border radius). Each individual dot moves 10px up and then it repeats infinitely. The globe uses an SVG image for the map.

 

Again, I'll link it on Monday, perhaps I'm not animating these things the best way.

 

The issue only goes away once both of these animations have their transforms set to 'none'

 

Thanks

post-5405-0-72739300-1462448313_thumb.png

Link to post
Share on other sites

What is the exact version of OSX you are using?

 

What is the exact version of Chrome you are using?

Link to post
Share on other sites

Sounds unrelated to GSAP, but I'm curious if adding this line of code to the beginning of your project has any effect: 

CSSPlugin.defaultForce3D = false;

Basically that will make GSAP skip the automatic GPU-acceleration on transforms. If there's a GPU issue on your end, this may resolve things (like if Chrome has to use a software renderer instead of hardware). It's slower, but perhaps it'll get rid of the issue. And again, that's not really a GSAP issue anyway - it just has to do with the browser rendering 2D vs. 3D transforms. 

  • Like 1
Link to post
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.

×