隐藏后 Chrome 不会重绘 <div>答案

【问题标题】：Chrome does not redraw <div> after it is hidden隐藏后 Chrome 不会重绘 <div>
【发布时间】：2012-06-15 15:53:22
【问题描述】：

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

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

谁能解释一下为什么这个重绘问题会在 Chrome 中发生？有没有人有任何提示可以在不弄乱我需要的 CSS 的情况下修复它？

【问题讨论】：

它不是真正的菜单，而是下拉式的。
看起来 div 可以是列表项，并使用与菜单类似的下拉标记/样式。例如htmldog.com/articles/suckerfish/dropdowns。这在 IE 的早期版本中也不起作用，因为 :hover 选择器仅适用于锚点。这似乎 jQuery 在悬停时使用 show() 或 hide() 会有所帮助。不过不确定你是否想走那条路。
我可以在最新的 Chrome Canary 中重现。
谢天谢地，我只需要支持到 IE8，技术上根本不需要支持 Chrome，但我更愿意让该网站在所有现代浏览器中运行。下拉列表的内容不一定是列表，但如果是，我会将其标记为 this。 jQuery 似乎对此有点沉重，因为它目前在所有浏览器中都可以使用，但 Chrome 仅使用 4 条 CSS 规则，但如果无法隔离重绘问题，我可能会考虑从头开始重新处理它。
另一个与此相关的 Chrome 错误（因为相同的修复工作）...折叠覆盖元素后屏幕上留下的水平伪影线。

【解决方案1】：

显然，这是一个 WebKit 错误。

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

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

【讨论】：

完美运行，正是我希望存在的那种技巧。谢谢！
@brentonsrine - 你应该考虑提交一个错误（为了更大的利益）。
@JosephSilber：实际上我之前发现了一个类似的错误：bugs.webkit.org/show_bug.cgi?id=60047。不知道为什么我没有在这里发布。脑筋急转弯。
很好的答案！在把我的头撞到墙上一天之后，这成功了。谢谢你
这很有趣，而不是-webkit-transform: translate3d(0,0,0);。当 Chrome 是新的 IE 时，世界正在发生什么，需要 hack 才能正常工作:(

【解决方案2】：

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

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

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

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

Chrome 的背面可见性存在许多错误，因此我将其发布给任何未来想要在没有太多工作的情况下找到修复的人。

【讨论】：