scrollToPlugin is buggy on Safari

[peterPotter 5 Likes (Newbie)]

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.

[Michael71 59 Likes (Contributor)]

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

[Jonathan 5,389 Likes (Superhero)]

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!

[roca 0 Likes (Newbie)]

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.

 

 

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 !