Jump to content
GreenSock

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

Scroll-Behavior CSS + Firefox + ScrollTo issue

Recommended Posts

As you can see from the demo url, when you scroll down, and click on the "up arrow" on the bottom right corner, scroll to plugin fails to scroll on Firefox. 

 

However if you disable the "scroll-behavior: smooth;" css on body element, the scroll works perfectly.

 

http://goodlife.fuelthemes.net/

Link to post
Share on other sites

What's supposed to happen? You have 2 things trying to control scrolling. Either have the browser do it, or use GSAP.

  • Like 2
Link to post
Share on other sites

Well, I am using a regular scrollto function:

 

container.on('click', function(){
					TweenMax.to(win, 1, {scrollTo: { y: 0 }, ease:Quart.easeOut});
					return false;
				});

 

I don't think you understand me clearly, I am not using any other function on that button.

 

How can "scroll-behavior: smooth;"  stop the javascript?

Link to post
Share on other sites

smooth scroll behavior is not for smooth scrolling, like with your mouse. It's to smoothly scroll to an anchor destination, which is done by the browser

Link to post
Share on other sites

See your anchor tag hash, "#". That's the top of the page.

 

<a href="#" id="scroll_totop" style="visibility: inherit; opacity: 1;"><i class="fa fa-angle-up"></i></a>

 

Link to post
Share on other sites

The hashtag has nothing to do with it, the javascript code has "return false;". I removed the hashtag, you can still see the issue on Firefox

 

http://goodlife.fuelthemes.net/

 

The issue is with the scroll-behavior: smooth; The issue goes away once its removed.

 

Also, a simple jQuery function works fine such as:

 

jQuery('body,html').scrollTop(0);

 

Link to post
Share on other sites

Why are you even setting the smooth scroll behavior?

 

For whatever reason, Firefox is triggering autoKill. It will work if you set autoKill to false, but that's probably not a good idea. @GreenSock may need to investigate this. Keep in mind that Firefox just went through a major overhaul, so there's going to be a lot of bugs popping up.

 

And in the future, please provide a demo. It's incredibly difficult to troubleshoot something on a live site. 

 

See the Pen QOmpvM by osublake (@osublake) on CodePen

 

 

 

 

 

 

  • Like 4
Link to post
Share on other sites

Are you seeing this in new Firefox 57?

 

Usually the CSS property scroll-behavior is buggy when applied to the body element. You might want to try and add it to the html element instead, this way it affects the viewport and not the body which has issues when scroll functions are performed by the browser on it... and see if that helps?

 

So you can either try setting

 

body { 
  smooth-scrolling: auto; 
} 

 

or remove it from the body and use on the root element

 

html { 
  smooth-scrolling: smooth; 
}

 

If that does not work try using

 

html { 
  smooth-scrolling: auto; 
}

 

See if that works.. if not then Jack's @GreenSock will have to investigate if new Firefox 57 is causing any shenanigans.

 

:)

  • Like 4
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.

×