Chrome 不会重绘 <div>隐藏后 [英] Chrome does not redraw <div> after it is hidden

问题描述

我有一些 div 在悬停时显示，然后隐藏.但是，在 Chrome (19.0.1084.56 m, Windows XP) 中，当您取消悬停时，Chrome 不会将它们重绘为已消失，除非您执行滚动或调整窗口大小等操作.

I have some divs that show up on hover, and then are hidden. However, in Chrome (19.0.1084.56 m, Windows XP) when you unhover, Chrome doesn't redraw them as gone until you do something like scroll or resize the window.

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

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

I am aware that certain modifications to my CSS will fix the problem, e.g. removing the position or z-index and overflow properties, but I really don't want to do that--the JSfiddle is paired down from a full site where I need them.

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

Can anyone shed any light on exactly why this redraw problem is happening in Chrome? Does anyone have any tips to fix it without messing with the CSS that I need?

推荐答案

显然，这是一个 WebKit 错误.

Clearly, this is a WebKit bug.

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

I found that adding -webkit-transform: scale3d(1,1,1); fixes it:

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

我不确定此修复程序是否有任何缺点.我猜这是可行的，因为在 WebKit 内部，不同的代码用于渲染 3D 转换.

I'm not sure if there are any downsides to this fix. I guess this works because inside WebKit, different code is used to render 3D transforms.

这篇关于Chrome 不会重绘 <div>隐藏后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！