固定和解决方案Google Chrome上隐藏的div错误

Question

问题：包含visibility:visible和position:fixed的父div中visibility:hidden的div会导致Google Chrome中出现渲染问题。 Images and examples can be found here

一周前你可以将-webkit-transform:translateZ(0)添加到父div并解决bug。但它不再起作用了：

• Without -webkit-transform
• With the hack。

两者都被窃听。

那么，有什么解决方案吗？当您调整窗口大小时，它会重新绘制div，当您打开开发人员工具时，错误也会消失。

所以我一直试图用javascript（jQuery）强制重绘：

jQuery(window).scroll( function() {
    jQuery("#parentDiv").addClass("nothing");
    jQuery("#parentDiv").removeClass("nothing");
});

有时有效（当文本字段显示在内部div中时）。真的很奇怪。还尝试隐藏和显示div，添加css属性（固定，底部：0 ...） 但没有什么工作正常。

有什么想法吗？

EDIT2：似乎它只发生在我身上：2个朋友，使用Windows和最新版本（17.0.963.79）没有看到第二个链接中的错误。但我仍然看到它。我在windows下重新安装了chrome，而且bug仍然存在。 我也清除了缓存，但没有任何变化。我是唯一一个????

Answer 1

根据我自己使用scroll()时的经验，所有表单元素都表现得很奇怪，或者不再起作用。

你的解决方案-webkit-transform:translateZ(0)将为webkit浏览器修复它，但所有其他浏览器都会在所有表单元素上面翻译一个翻译层，结果是不再可以访问form-element。

scroll（）是纯粹信息（文本图像）的绝佳解决方案，而不是表单。