Jump to content
GreenSock

jackyon

choppy animation on safari

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

In codepen url:    all works normal. 

 

If I save the code as a independent file and opening in safari browser, the gasp animation become choppy, other browsers works normally. I don't know why this happened, is it the bug from safari, or from gasp?  (mobile safari also have this issue.)

 

issue url:  http://cstory.cn/safari/  (choppy animation happened at 1st time when there is no images cache in your browser.)

 

 

I used pxload js to preload the images.

 

 

 

This is very weird issue. I am trying to figure out why for two days. plz help me! thx!

See the Pen gKEBl by jackyon (@jackyon) on CodePen

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

I noticed that the example doesn't work at all in Chrome and both Safari and Chrome have errors in the console. 

Some relating to PxLoader not being defined and others related to resources not loading.

 

From looking at your code I only see 2 lines of code that are related to GSAP. One for a fade and another for rotation.

The rotation looked fine in safari.

 

In order to troubleshoot this properly it would help if you could 

 

1: fix the errors that aren't related to GSAP

2: remove all code that isn't absolutely necessary to replicate the issue

 

This will help us better focus in on what the problem may be. Thanks

  • Like 1
Link to comment
Share on other sites

Hi Carl,

 

I already fixed and remove all the necessary codes. 

 

thx.

Link to comment
Share on other sites

Hello jackyon, Thanks for fixing the errors.

 

I did notice that you are tryng to animate your #box with CSS transitions all and at the same time animate the #box with GSAP. I don't know if there is a conflict or if they are competing in the browser, so i'm not sure which one will animate your #box, CSS transitions or GSAP.

 

You could:

  • Try removing the competing CSS transitions on your #box CSS rule
     
  • Try setting the CSS position property to absolute on #box element
     
  • Animate using autoAlpha rather than opacity.  taken from CSSPlugin Docs:
    Identical to opacity except that when the value hits 0 the visibility property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to "inherit". It is not set to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want.
    see reference:
    http://greensock.com/docs/#/HTML5/Plugins/CSSPlugin/
     
  • Add force3D:true to your tweens to tell the browser to render your element using the GPU (graphics card) instead of using the CPU. Note I you only add force3D to tweens with the CSS properties of that have opacity, autoAlpha, and CSS transforms. force3D is part of the CSSPlugin
    see reference in CSSPlugin Docs: http://greensock.com/docs/#/HTML5/Plugins/CSSPlugin/

:

I believe other fellow GreenSockers here can provide other solutions.. Hope this helps! :)

  • Like 1
Link to comment
Share on other sites

Yeah, Jonathan has an excellent point. You should definitely make sure there are no conflicts between CSS animations and GSAP.

 

Also I did a quick peek at the timeline and it seems you are shoving all 100 images at the browser at the same time.

Consult the image below

http://prntscr.com/4m39zu

 

A browser can only handle so many requests at a time (16?) and usually the instantiating of the loads happens in a more staggered fashion.

 

I found that removing your loader code helped a lot.

 

I would like to test in other browsers like Chrome, but again there are still errors there.

  • Like 1
Link to comment
Share on other sites

Hi Johnthan,

 

thx for all your advise, I follow your suggest step by step, but it is still not working, the choppy animation still happened in safari.

 

anyway, it is good to the "autoAlpha" property, I didn't notice this property before.

 

 

Thx! 

Link to comment
Share on other sites

Hi Carl,

 

maybe it's the bug from pxload js plugin, I changed to 10 request already, but still happened the same issue.

 

thx for your help!

 

 

Link to comment
Share on other sites

hm... 

I tried different preloader js plugins, but all failed. All happened choppy animation on safari with gsap.

 

here is the demo link of using other preloaded plugin

http://cstory.cn/safari/test2.html

 

Really no idea how to solve this, can some body help me plz.

 

Thx.

 

Link to comment
Share on other sites

Is this on Safari on Mobile or Safari on Desktop?

 

Also what OS and OS VERSION?

 

What Safari version?

Link to comment
Share on other sites

Hi jonathan,

 

both mobile safari and desktop safari were happened the same issues.

(I tested on my friends macbook safari, same issue exist。)

 

My Mobile os: ios7.1.1  (11D201)

My Desktop os: OSX 10.9.4,  safari: 7.0.6 (9537.78.2)

 

thx!

 

 

Link to comment
Share on other sites

What's weird is that when I first went to that URL, I saw the weird jerky animation (only in Safari, as you said) and then I popped open Dev Tools and BOOM, things suddenly looked silky-smooth. I didn't do anything except activate Dev Tools! I also watched the values that were updating and GSAP was doing its job perfectly - it just looked like Safari's rendering engine wasn't actually drawing the updates to the screen at times. In other words, sometimes the CSS was being updated via JS, but Safari wasn't reflecting that visually. This is clearly some sort of odd edge case Safari rendering bug and is unrelated to GSAP. 

 

I was going to recommend trying to isolate exactly what in your setup is causing the glitch (like perhaps it's a certain z-index or mixing margins and top/left and position:absolute or something funky like that), but ever since it resolved itself in my browser that first time, I cannot get it to glitch again...at all. I have restarted Safari, I closed Dev Tools, reloaded like 15 times...it now works great every time. Zero problems. So I can't be of any help in identifying what's causing the problem since it refuses to happen again for me. Can anyone else get it to glitch? 

 

One other possibility is that my Safari auto-updated after my first load and Apple fixed the bug in the latest release (I have no idea if that's true). 

Link to comment
Share on other sites

Oh, I think I see now - I had to clear my cache every time so that all your images were forced to re-download. It looks to me like this simply has to do with overwhelming Safari with a bunch of network tasks and other decoding, bogging down the main thread initially. Think of it like the CPU is being maximized so much with all the loading and decoding of image data that it doesn't even have time to refresh the screen and fire requestAnimationFrame events for long chunks of time. So the solution would be to throttle those tasks. 

 

The reason it works better in other browsers is simply because those other browsers do a better job of juggling the various tasks without bogging down the main thread. 

  • Like 3
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.
×