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 脚本中,我只是将类切换.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%);
}
推荐阅读
- jquery - 动态的 jQuery 字段计算
- ansible - Ansible 嵌套变量正则表达式搜索
- node.js - 如何通过响应标头从 Express 后端向 React 客户端发送一些数据(可能是 json 数据)?
- max - 如何获得最近的两次相遇日期?
- postgresql - 如何从 Postgres 中的存储过程返回一个集合(多行)?
- r - 在 Microsoft Open R 中加载 Rcpp/RcppArmadillo 包时出错
- r - 如何在 ggplot 上添加辅助轴?
- jquery - 使用 jquery.nestable.js 禁用可嵌套列表的拖动
- java - 如何在java中翻转句子中的两个单词
- sql - 从 JSON 字符串中提取值会引发错误消息 T-SQL