我在 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
最佳答案
高度过渡很重(它们在每一帧重新计算太多东西),如果可能的话你应该改用变换。除此之外,您可以尝试添加 will-change: height
例如:
.myNav {
transform: translateY(-100%);
transition: transform 0.15s;
}
.myNavActive {
transform: translateY(0%);
}
关于html - 简单的 css 动画在 Safari 中不流畅,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54809093/