Chrome + Safari不透明度转换错误 [英] Chrome + Safari opacity transition bug creates st

问题描述

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

I have a bug on a opacity transition in both Chrome and Safari. When I hover over a parent div that triggers a opacity transition from 0 to 1 on a child div, content beneath the child div jitters for a split moment.

我在上尝试使用 -webkit-font-smoothing：antialiased; body ，但效果仍然会发生。任何想法为什么？您可以在此处（使用Chrome或Safari）中查看问题，将鼠标悬停在帐户链接中

I've tried using -webkit-font-smoothing: antialiased; on the body, but the effect still occurs. Any ideas why? You can see the issue here (using either Chrome or Safari, hover over the 'Account' link in the top menu and you'll see the flicker).

推荐答案

添加 -webkit-backface-visibility：隐藏; c>添加到元素，或者添加到 * 的所有元素。

Add -webkit-backface-visibility: hidden; to the element, or to all elements with * if you feel like setting a blanket statement.

描述问题的几个链接：

Prevent flicker on webkit-transition of webkit-transform

如何解决闪烁时使用Webkit变换&转换

这篇关于Chrome + Safari不透明度转换错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！