[英]CSS keyframes animation is not smooth on Safari but works on Chrome
[英]simple css animation not smooth in Safari
我在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
。 我也尝试删除网站的其他部分,仍然是相同的。
编辑:safari 9似乎没有这个问题,但safari 12
高度过渡很重(它们在每个帧重新计算太多东西),如果可能的话,你应该使用变换。 除此之外,您可以尝试添加will-change: height
例如:
.myNav {
transform: translateY(-100%);
transition: transform 0.15s;
}
.myNavActive {
transform: translateY(0%);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.