Firefox не анимирует навигацию по реагирующему сайту при прокрутке вниз

Question

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

Запуск React 16.9. Я пробовал следующие вещи.

Протестировано на новейших версиях Chrome и Firefox.

• Пробовал с помощью requestAnimationFrame
• Используя rotate3d, так что GPU берет на себя
• Проверяется, срабатывает ли событие прокрутки (оно срабатывает.)
• Пробовал ту же анимацию с непрозрачностью вместо изменения top

Некоторый код:

//Добавлен прослушиватель событий

  componentDidMount = () => {
    window.addEventListener('scroll', throttle(this.handleScroll, 100));
    window.addEventListener('keyup', this.handleKeyPress);
  }

// Что запускает событие

  handleScroll = () => {
    const { currentNodeType } = this.props;
    if (currentNodeType === 'landing_page') {
      this.setState({ navScrolled: window.scrollY > (window.innerHeight - 125) });
    } else {
      this.setState({ navScrolled: window.scrollY > 285 });
    }
    const { prevScrollpos } = this.state;

    const currentScrollPos = window.pageYOffset;
    const visible = !!(prevScrollpos > currentScrollPos || window.scrollY < 30);

    this.setState({
      prevScrollpos: currentScrollPos,
      visible,
    });
  }

Затем класс добавляется или удаляется в навигации в зависимости от того, видим ли он

// Классы

.nav-hidden {
  transition: all 0.333s ease-out;
  top: -125px;
}
.nav-visible {
  transition: all 0.333s ease-out;
  top: 0;
}

Я не могу публиковать изображения из-за необходимости повторения. (это мой первый вопрос о переполнении стека)

поведение на Chrome - желаемое поведение

https://imgur.com/WkhlS4Y.gif

поведение на Firefox - нежелательное поведение

https://imgur.com/hoEOP4x.gif

Надеюсь, я достаточно ясно. Заранее спасибо!

Answer 1

Исправлено это с помощью поля вместо вершины.

.nav-hidden {
  transition: all 0.333s ease-out;
  top: 0;
  margin-top: -125px;
}
.nav-visible {
  transition: all 0.333s ease-out;
  top: 0;
}

Надеюсь, это поможет!