javascript - 在某些窗口宽度下呈现 Google Chrome 中的错误

Question

我和我的用户仅在 Chrome 中(在 Windows 和 Mac 上)遇到了渲染故障，其中我用于悬停工具提示样式“弹出窗口”的覆盖 div(请参见下面的第一张图片)没有在某些情况下得到正确渲染(见下面的第二张图片)。在我测试过的所有其他浏览器中，它都按预期工作。

这是悬停弹出窗口的外观(以及在 Firefox、Safari 和 IE 中发生的情况):

这是 Chrome 中发生的事情:

您可以在 this site 上看到它的实际效果如果您查看 5 月 24 日使用的浏览器窗口宽度约为 1200 像素(明显更宽或更窄的窗口似乎不起作用)。该故障仅影响菜单右下角向左弹出的弹出窗口，例如那些在 5 月 24 日发布的。在页面上方使用完全相同的机制悬停效果很好。出现故障的弹出窗口是不可见的(克拉的一部分除外)，但是如果您单击链接以将弹出窗口锁定到位，然后在移动鼠标的同时按住左键单击，就好像要在弹出窗口应该出现的区域中“选择文本”一样是，然后它将部分渲染。此外，如果我打开开发工具并尝试选择弹出窗口，它会在此时呈现得很好。

我一整天都在关注这个问题，并尝试了不透明度、z-index 等不同的解决方法，但一无所获。 这个故障是否为任何人敲响了警钟？有没有一种方法可以强制 Chrome 在 div 被定位并取消隐藏后呈现它？我可以接受任何变通方法或 hack。

我为弹出窗口使用自定义(并且相当复杂)的 jquery 插件。如果查看插件的非缩小 javascript 会有所帮助，我可以发布或提供指向它的链接，但是引导我解决问题的一般指导将足以被接受为答案。

编辑:我的浏览器版本:26.0.1410.65

Answer 1

^{(根据我的评论)}

这确实看起来确实是 Chrome 中的一个错误，但如果没有较小的测试用例来重现它，可能很难找到它。您可能希望向 Chrome 团队报告该问题并提供尽可能多的信息。

支持我的“这是一个错误”的断言:

• 隐藏/剪裁的元素在被选中时变为可见。
• 隐藏/剪切元素下方的元素不可点击。
• 这表明 z-index 和高度是正确的。
• 它只发生在非常特殊的情况下；其余具有相同样式的元素工作正常。 相同 的元素可能在稍大/稍小的屏幕宽度下工作正常。
• 应用 3D 变换修复它。

当我应用 scale3d 或 translate3d 等 CSS 转换时，问题就消失了。我想这是因为 certain CSS properties cause the browser to switch to GPU acceleration .

在这种情况下，switching to the fast path for rendering似乎改变绘图顺序足以解决问题。