27

我有一些divs 在悬停时出现,然后被隐藏。但是,在 Chrome(19.0.1084.56 m,Windows XP)中,当您取消悬停时,Chrome 不会将它们重新绘制为已消失,直到您执行滚动或调整窗口大小等操作。

http://jsfiddle.net/y7NdR/3/

我知道对我的 CSS 进行某些修改将解决问题,例如删除positionorz-indexoverflow属性,但我真的不想这样做——JSfiddle 是从我需要它们的完整站点配对下来的。

任何人都可以解释为什么这个重绘问题会在 Chrome 中发生吗?有没有人有任何提示来修复它而不会弄乱我需要的 CSS?

4

2 回答 2

39

显然,这是一个 WebKit 错误。

我发现添加-webkit-transform: scale3d(1,1,1);修复它:

http://jsfiddle.net/thirtydot/y7NdR/5/

我不确定这个修复是否有任何缺点。我想这是可行的,因为在 WebKit 内部,使用不同的代码来呈现 3D 变换。

于 2012-06-12T18:59:57.597 回答
3

我为此苦苦挣扎了很长时间,虽然添加-webkit-transform: scale3d(1,1,1);确实解决了我的问题,但我想找出原因。所以,我深入研究了我的代码,试图缩小我的问题范围。我发现我正在使用淡入淡出动画,在这里面,我包含在同一个类中:

-webkit-backface-visibility:hidden;
backface-visibility:hidden;

单独删除这两行,在没有缩放变换黑客的情况下解决了我的问题。

看到背面可见性与变换有关,并且应该对 2D 变换没有影响,我将其删除,它完全解决了我的问题。

有很多关于 chrome 的背面可见性的错误,所以我把这个发布给任何未来试图在没有太多工作的情况下找到修复的人。

于 2014-07-18T00:39:56.407 回答