【问题标题】: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 错误动画问题
猜你喜欢
  • 1970-01-01
  • 2016-06-02
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-03-26
  • 2015-07-19
  • 1970-01-01
相关资源
最近更新 更多