简单的CSS动画在Safari中不流畅

Question

我在Safari的网站上有一种奇怪的行为.我想通过css转换将菜单从高度0px扩展到高度100%.这适用于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-script中,我只需将类切换.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

Answer 1

高度过渡很重（它们在每一帧重新计算太多的东西），如果可能的话你应该使用变换。除此之外，您可以尝试添加will-change: height

前任：

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

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