Search code examples
javascriptreactjsreact-scroll

React-Scroll duration doesn't apply on Firefox but it works on Chrome

I am building a website which uses the react-scroll library, and am using the Link component in order to activate certain transitions. I am using the duration property, and it works perfectly on Chrome, however when I test the website on Firefox, the duration doesn't change and runs significantly faster than it does on Chrome. Here is my code:

<Link
   activeClass="active"
   to={this.state.prevSectionId}
   spy={true}
   onSetActive={() => this.handleSectionChange(-1)}
   duration={1000}>
   <FontAwesomeIcon icon={faChevronUp} size="lg" />

I also have a custom button that scrolls to the top of the page, and that also animates significantly faster in Firefox than in Chrome, with no duration set:

<div id="scrollToTopButtonWrapper">
    <button onClick={() => window.scrollTo(0, 0)}>
        <FontAwesomeIcon icon={faArrowCircleUp} size="4x" />
    </button>
</div>

This issue is impacting the functionality of the website in conjunction with other animations, though the root cause is the duration that it takes to run.

Solution

  • So it seems as though the issue was caused by scroll-behavior being set to smooth in my css. I was able to resolve the issue by removing that from the css and adding smooth={true} in my Link component instead.