隐藏</div>后，Chrome不会重绘<div>

Question

我有一些div在悬停时显示，然后被隐藏。但是，在Chrome（19.0.1084.56米，Windows XP）中，当您取消切换时，Chrome不会重绘它们，直到您执行滚动或调整窗口大小等操作。

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

我知道对我的CSS进行某些修改可以解决问题，例如：删除position或z-index和overflow属性，但我真的不想这样做 - JSfiddle从我需要它们的完整网站配对。

任何人都可以清楚地知道为什么Chrome中会出现这种重绘问题？有没有人有任何提示来修复它而不会搞乱我需要的CSS？

Answer 1

显然，这是一个WebKit错误。

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

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

我不确定此修复程序是否有任何缺点。我想这很有效，因为在WebKit中，不同的代码用于渲染3D变换。

Answer 2

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

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

单独删除这两行，解决了我的问题，没有缩放变换黑客。

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

有许多关于背面可见性与铬的错误，所以我发布这个为任何未来的人试图找到一个没有太多工作的修复。