我有一个响应式移动网站,我正在创建一个 CSS 汉堡菜单(一个滑出的面板菜单)。
我实现它的方式非常简单(我选择不使用任何现有的框架)。它通过使用 transition
来工作位于 left .3s ease-in-out
的房产, 并操纵 left
属性(property)。
所有浏览器的性能都很差。这绝对是“可以接受的”,但并不完全顺利。
不幸的是,到目前为止,我发现的所有脚本都具有相同的缓慢性能。 This one例如,看起来很棒,但速度很慢。
现在,有一个异常(exception)... THIS menu不知何故,工作如此惊人和完美流畅。完美无瑕……但我不知道他是怎么做到的。如果您没有看到菜单,请将浏览器的大小调小直到出现。
他的 JS 和 CSS 真的严重破坏了我的网站,这就是为什么我不能真正使用它的原因。甚至不值得修改他的代码。但我很想知道他的 CSS 的哪一部分真正让它变得如此流畅。
谢谢!
最佳答案
将以下内容添加到您的导航中
transform: translateZ(0);
这将启动硬件加速并使过渡更加顺畅
您还可以通过添加来帮助它
transition: all 0.6s ease;
perspective: 1000;
-webkit-backface-visibility: hidden;
关于ios - 如何提高 iOS 汉堡菜单的 CSS 性能?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23996954/