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脚本中，我只需将类.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

高度转换很重（每帧它们都会重新计算太多东西），如果可能的话，您应该改用transform。除此之外，您可以尝试添加will-change: height

例如：

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

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

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

1 个答案: