0

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.

mkrieger1
  • 19,194
  • 5
  • 54
  • 65
Sal
  • 1,471
  • 2
  • 15
  • 36
  • Maybe https://github.com/fisshy/react-scroll/issues/341 is relevant – apokryfos Jun 05 '20 at 08:31
  • @apokryfos Thanks for the reply. I gave it a shot, but still didn't seem to work :/. To give some more background, I have `overflow-y: scroll;` on the `body` element in my css. I defined the height on the `html` property, tried moving the `overflow-y` property to `#root` and defined height on the `body`, yet to no avail. – Sal Jun 05 '20 at 11:09

1 Answers1

0

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.

Sal
  • 1,471
  • 2
  • 15
  • 36