Анимации React не работают с прокруткой страницы

Question

Я занимаюсь разработкой сайта, который использует реагирующую прокрутку страницы и реагирующее открытие.Скроллер страниц заменяет весь видовой экран следующей «страницей», когда пользователь прокручивает страницу вниз.Реакция отклика оживляет текст на каждой странице.

Я разработал сайт в Chrome, и анимация работает отлично.Однако, когда я тестирую сайт в Firefox и Safari, прокрутка страницы по-прежнему ведет себя, как и ожидалось, но анимация реагирования показывает только на первой странице.На других страницах раскрытие не запускается, и непрозрачность каждого элемента остается равной 0.

Я пытался использовать опцию «Появиться» на элементе реагировать-показать, чтобы показать, когда страница изменяется,Библиотека реагировать на ошибки сообщила о проблемах с «переполнением: скрытым» в Safari, к которому автоматически применяется прокрутка страницы-реакции.Я попытался изменить это на «видимый» вместо этого, но это не имело значения.Любая помощь будет принята с благодарностью!

Я создал простой файл, чтобы продемонстрировать это.Запустите create-react-app, а затем npm install react-reveal react-page-scroller @material-ui/core.Наконец, замените App.js следующим:

App.js

import React, { Component } from 'react';
import { withStyles } from '@material-ui/core/styles';
import ReactPageScroller from 'react-page-scroller';
import Fade from 'react-reveal/Fade';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentPage: 1
    };
    this._pageScroller = null;
  }

  pageOnChange = (number) => {
    this.setState({ currentPage: number });
    console.log('on page:', this.state.currentPage);
  }

  render() {
    const { classes } = this.props;

    return (
      <div className="App">
        <ReactPageScroller ref={c => this._pageScroller = c} pageOnChange={this.pageOnChange}>
          <div className={classes.page}>
            <Fade top delay={500} duration={2000}>
              <h1>
                Testing Fade Animation 1
              </h1>
            </Fade>
          </div>
          <div className={classes.page}>
            <Fade top delay={500} duration={2000}>
              <h1>
                Testing Fade Animation 2
              </h1>
            </Fade>
          </div>
        </ReactPageScroller>
      </div>
    );
  }
}

const styles = {
  page: {
    webkitBackfaceVisibility: "hidden",
    background: "white",
    minHeight: "100vh",
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
    fontSize: "calc(10px + 2vmin)",
    color: "black",
  },
};

export default withStyles(styles)(App);