html中加入简单动画,HTML – 简单的CSS动画在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');

});

我也尝试过在类似问题上建议使用动画持续时间.我也尝试删除网站的其他部分,仍然是相同的.

编辑：safari 9似乎没有这个问题,但safari 12