Safari 与 Chrome 上的 CSS 轻松过渡答案

【问题标题】：CSS Ease Transitions on Safari Vs ChromeSafari 与 Chrome 上的 CSS 轻松过渡
【发布时间】：2017-03-08 04:36:09
【问题描述】：

在 chrome 上查看我的网站，然后在 safari 上查看。稍微滚动一下，看看顶部的横幅过渡。

https://www.successpartnersuniversity.com/speakers

nav{
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

这很尴尬...在 chrome 和 firefox 中，在轻松转换中没有一个像素被跳过。但是在 Safari 上太可怕了……链接也是最差的演讲者页面，但关于页面要好得多……这也很奇怪。

我发现很多网站都在解释为什么...我不在乎...有没有人可以做些什么来让它变得更好？

谢谢！

【问题讨论】：

尝试使用transform: translate3d(x,y,0) 将菜单从0vw 转换为13.1vw 并仅声明那些在转换中更改的属性而不是all，也许您可以尝试使用will-change
目前webkit-transition 不是任何浏览器中任何HTML 元素的有效属性。你的意思是-webkit-transition？
这只是问题中的一个错字。
@Omar 你能编辑问题并更正错字吗？否则这个问题会一直报错。

标签： html css animation css-animations

【解决方案1】：

我相信某些 Safari 可能在使用“all”时遇到问题。在定位 safari 浏览器时，请尝试使用“all”的替代方法来实现您的效果。

【讨论】：