Chrome + Safari 不透明度转换错误创建 st

Posted 2023-03-06

【中文标题】Chrome + Safari 不透明度转换错误创建 st

【英文标题】：Chrome + Safari opacity transition bug creates st

【发布时间】：2014-05-04 02:53:48

【问题描述】：

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

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

【参考方案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; 应用到正文选择器可以吗？

只要解决了闪烁问题，没有其他问题，应该没问题。与任何事情一样，它本身就有可能产生问题，因此最好只针对导致问题的特定元素。