простая анимация CSS не плавная в Safari - PullRequest
Новая
       70

простая анимация CSS не плавная в Safari

0 голосов
/ 21 февраля 2019

У меня странное поведение на сайте в Safari.Я хочу расширить меню с высоты 0px до высоты 100% с помощью CSS-перехода.Это работает правильно в Firefox, Chrome и Edge.Однако в Safari всегда есть точка останова, когда анимация останавливается на очень короткий период, вызывая замедленную анимацию.Я проверил, что ни один элемент не находится в том же z-index.Я нашел «исправление» на домашней странице, которое обозначено комментарием в CSS, но это ничего не меняет. 

.dropdown-nav{
  position: fixed;
  display: block;
  z-index: 21;
  width: 100%;
  height: 0;
  left: 0;
  background-color: white;
  top: 0;
  padding: 0;
  transition: height 0.6s ease-out;
  -webkit-transition: height 0.6s ease-out;
  -webkit-backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  /* Enable hardware acceleration to fix laggy transitions */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}

.dropdown-nav-visible{
  height: 100%;
}

В моем js-скрипте я просто переключаю класс .dropdown-nav-visibleна .drop-down-nav

$('#nav-icon4').click(function(e){
  e.preventDefault();
  $(".dropdown-nav").toggleClass("dropdown-nav-visible");
  $(this).toggleClass('open');
});

Здесь вы найдете медленное поведение: https://magnavoce.ch и здесь те же настройки, но это работает: http://dev5.raphael -rapior.com / .

Я также пытался использовать animation-duration, как предложено в похожем вопросе по SO.Я также пытался удалить все остальные части сайта, все так же.

Редактировать: похоже, что в safari 9 такой проблемы нет, но в safari 12

1 Ответ

0 голосов
/ 26 февраля 2019

Высотные переходы тяжелы (они пересчитывают слишком много вещей в каждом кадре), если возможно, вместо этого следует использовать преобразование.Кроме этого, вы можете попытаться добавить will-change: height

ex: 

.myNav {
transform: translateY(-100%);
transition: transform 0.15s;
}

.myNavActive {
transform: translateY(0%);
}
...