CSS转换在Safari中不起作用答案

【问题标题】：css transitions not working in safariCSS转换在Safari中不起作用
【发布时间】：2014-03-13 02:04:57
【问题描述】：

如果您查看我的页面http://debourg-dev.ch/crea/，您会发现我的链接上的过渡效果在 safari 中不起作用（在 mac 上的最新版本上测试）。我的代码如下：

a {
    color: inherit;
    text-decoration: none;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

有什么问题？

【问题讨论】：

它在 Safari 上为我工作...
试试这个所有 0.5s 缓入缓出 0s。 ios6 ipad 需要在末尾添加 0
感谢您的建议，但同样没有区别

标签： css safari css-transitions

【解决方案1】：

似乎 Safari 有一个错误，并且在 transition: all; 上阻塞（或者只是 transition: Xs;，因为 'all' 是默认属性）。它甚至会导致某些版本的桌面和 iOS Safari 崩溃。

解决方案：将其更改为transition: color 0.5s ease-in-out; （或者，当然是任何其他属性，只要确保它不是“全部”。）

这也可能是一个问题，特别是全局应用于锚标签的转换 - 阅读更多here

更多关于 Safari crashing

还有here

【讨论】：

这很有帮助，谢谢。我还要注意，这在样式属性中并不一致——我在 MacOS Safari 13.1 中遇到了一个错误，如果应用了 transition:all，Safari 将不会重新呈现某些属性，例如 outline，如果它们是唯一值为被改变。但是添加像font-size这样的其他属性会触发重绘，所有的转换都会被渲染，包括之前被忽略的outline。

【解决方案2】：

在运行 OSX 10.9.1 和 Safari 7.0.1 时，转换似乎对我有用。如果我不得不猜测，这个问题很可能是由于缓存造成的。尝试清除缓存，看看问题是否仍然存在。

【讨论】：

已尝试清除缓存并重置 safari，但仍无法正常工作。我也在运行 OSX 10.9.1 和 Safari 版本 7.0.1 (9537.73.11)

【解决方案3】：

对于 Safari，请尝试以下操作：

-webkit-transition: 190ms width linear;

其中 width 表示正在更改的属性，请避免使用 all，因为不同的浏览器对此的解释不同，并且可能会导致问题，尤其是在 Safari 浏览器中。

【讨论】：

令人惊讶的是，它没有使用转换： translateY(0) 1s;使用您的格式修复了我的 Safari 错误动画问题