Jump to content
GreenSock

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

scrollToPlugin is buggy on Safari

Recommended Posts

The scrollToPlugin is buggy on Safari, when scrolling to a section of a long page. The plugin works perfectly on Chrome and Firefox. So there is definitely an issue with Safari, not with my code :).

 

Specifically, sometimes when you scroll to a div or element, the page doesn't scroll all the way; it will just scroll a bit and stop. Other times it may work. My code is simple:

TweenMax.to(someElement, 0.9, {
scrollTo: {y: scrollToVal},
ease: Expo.easeInOut
});

I tested on the latest version of all three browsers. Safari 8.0.x is the culprit.

Link to comment
Share on other sites

Have you tried to include the autoKill: false property to see if this behaviour is due to something else messing with the scroll?

  • Like 3
Link to comment
Share on other sites

Hello peterPotter, and Welcome to the GreenSock Forum!

 

If possible can you setup a very limited codepen example, so we can try to replicate this on Safari and Safari 8.0 ?

 

This way we can see what scrollToVal value is being passed and debug the code in real time. 

 

Thank You!

  • Like 2
Link to comment
Share on other sites

Hi,

 

I'm coming across the same problem and can't figure this out...

Apparently TweenLite fires a "sleep" function out of nowhere and only on safari. I checked and I don't really see what could possibly interfere with the scrollto tween.

 

screenshot.png

 

Here is the link of the webpage : http://romaincazier.com/ghostape

 

I know it's a bit of a mess in my code (sry), but you can still see that there is nothing wrong (at least to me !)

$('#intro a').click(function(e) {
		if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
			e.preventDefault();
			var target = $(this.hash);
			target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
			if (target.length) {
				scrolling = true;
				TweenLite.to(window, 2, {scrollTo:{y:target.offset().top}, onComplete: function() {
					$('#intro').remove();
					scrolling = false;
					$('article video')[inc].play();
					sound[inc].play();
					$($('article')[inc]).addClass('active');
					$('body').css('overflow', 'auto');
				}});
			}
		}
	});

Thanks in advance !

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