Jump to content
GreenSock

kharm

Jittering scrollTo in 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

Hi, I'm having trouble with scrollTo plugins, it gives jitter effect in safari, whilst it shows good animation in firefox / chrome. Here is the case : www.digital-hedge.com/pen/scrollToAsk.html

Turn on the web inspector in safari to see more jitter effect in this page. My current project show more jitter effects, seems because heavier animation in my page.

 

Any idea? Thanks.

 

I'm using Mavericks 10.9.2, Safari 7.0.2, TweenMax 1.11.5 and scrollToPlugin 1.7.3

scrollTo.zip

Link to comment
Share on other sites

Another problem I face using this scrollTo plug in is sometimes it stop updating the scrollTop value [ again using the safari ]. Don't know if this behaviour is correlated with the jittering problem.

Here is the case : http://www.digital-hedge.com/pen/scrollToAsk2.html

 

To trigger the problem scroll to the bottom of the page, and click the 'link to 1000px' button. Repeat this several times, the tweening function will stop at the middle of animation.

 

Thanks.

Link to comment
Share on other sites

I don't have time to drill into your project right now, but in regards to the tween stopping - I'm guessing that Safari's performance woes are unfortunately triggering the scroll's autoKill functionality. You can read about it here - just add autoKill:false to your tween vars and it shouldn't stop anymore.

  • Like 3
Link to comment
Share on other sites

@Jamie : You're right, I've misused the autoKill when trying to use this parameter before. Instead of

TweenMax.to( obj, delay, { scrollTo : { y : targetY, autoKill : false} };

I use TweenMax.to( obj, delay, { scrollTo : { y : targetY}, autoKill : false };

 

Thanks.. It works now for the stopping scroll problem..

 

@Carl : Okay Carl, I'll use it next time.. I've already found the solution for my current sample problem, [ even unfortunately still won't work in my actual project and I can't imitated/simplified the problem right now ]. Thanks. :)

 

 

 

Anyway for anyone who face the same flickering issue in safari, you could try to add :

-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;

 

in the animating object, it works well in my current example..

  • Like 1
Link to comment
Share on other sites

  • 3 weeks later...

I had the same thing, making it false made Safari work much better! Thank you!

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.
×