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

【问题标题】：simple css animation not smooth in Safari简单的 CSS 动画在 Safari 中不流畅
【发布时间】：2019-07-15 11:39:42
【问题描述】：

我在 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

【问题讨论】：

我正在调查这个问题，我发现您在 .ddn-container 上的“身高”拼写错误。不过，这不是导致错误的原因。
查看您的 css，我倾向于认为您的 z-index 是问题，请尝试将其完全删除。此外，高度对于过渡也不可靠。使用 max-height 代替。同时删除所有你转换的..硬件加速只是一个android错误..现在已经解决了几年）玩得开心
尝试使用 polyfilla

标签： html css safari css-transitions

【解决方案1】：

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

例如：

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

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

【讨论】：