【问题标题】:Chrome + Safari opacity transition bug creates stChrome + Safari 不透明度转换错误创建 st
【发布时间】:2014-05-04 02:53:48
【问题描述】:

我在 Chrome 和 Safari 中都有关于不透明度转换的错误。当我将鼠标悬停在触发子 div 上从 0 到 1 的不透明度转换的父 div 上时,子 div 下方的内容会瞬间抖动。

我尝试在body 上使用-webkit-font-smoothing: antialiased;,但效果仍然存在。任何想法为什么?您可以看到问题here(使用 Chrome 或 Safari,将鼠标悬停在顶部菜单中的“帐户”链接上,您会看到闪烁)。

【问题讨论】:

    标签: html css google-chrome safari webkit


    【解决方案1】:

    -webkit-backface-visibility: hidden; 添加到元素中,或者添加到带有* 的所有元素中(如果您想设置一揽子声明)。

    几个链接更详细地描述了这个问题:

    Prevent flicker on webkit-transition of webkit-transform

    How to fix flicker when using Webkit transforms & transitions

    【讨论】:

    • 感谢约翰的回答。将-webkit-backface-visibility: hidden; 应用到正文选择器可以吗?
    • 只要解决了闪烁问题,没有其他问题,应该没问题。与任何事情一样,它本身就有可能产生问题,因此最好只针对导致问题的特定元素。
    猜你喜欢
    • 2015-07-18
    • 1970-01-01
    • 2020-07-12
    • 2020-06-09
    • 2011-07-22
    • 2013-09-29
    • 2013-06-23
    • 2013-03-14
    • 1970-01-01
    相关资源
    最近更新 更多