在特定窗口宽度下呈现Google Chrome中的错误

Question

我的用户和我只在Chrome中遇到渲染故障(在Windows和Mac上),其中我用于悬停工具提示式"弹出窗口"的重叠div(请参见下面的第一张图片)无法正确呈现在某些情况下(见下面的第二张图).在我测试的所有其他浏览器中,它按预期工作.

以下是悬停弹出窗口的外观(以及Firefox,Safari,IE中发生的情况):

以下是Chrome中发生的情况:

如果你在5月24日使用浏览器窗口宽度~1200px(显然更宽或更窄的窗口似乎不起作用),你可以在这个网站上看到它的实际运行情况.毛刺只会影响左侧弹出的菜单右下角的弹出窗口,例如5月24日出现的弹出窗口.在页面中较高的位置使用相同的精确机制.Glitched弹出窗口是不可见的(除了部分克拉),但是如果你点击链接将弹出窗口固定到位,然后在移动鼠标的同时按住左键,就好像要在弹出窗口应该选择的区域中选择"选择文本"然后,它将部分呈现.此外,如果我打开开发工具并尝试选择弹出窗口,它将在那时呈现正常.

我一整天都在关注这个问题并尝试使用不透明度,z-index等进行不同的工作,并且无处可去.这个小故障会给任何人敲响声吗？一旦定位和取消隐藏,有没有办法强制Chrome渲染div？任何解决方法或黑客行为我都没问题.

我为弹出窗口使用自定义(并且相当复杂)的jquery插件.如果看到插件的非缩小javascript会很有帮助,我可以发布或提供一个链接,但是导致我解决的一般指导将足以被接受作为答案.

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

Answer 1

^{（根据我的评论）}

这确实似乎是 Chrome 中的一个错误，但如果没有较小的测试用例来重现它，可能很难追踪到。您可能需要向 Chrome 团队报告并提供尽可能多的信息。

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

• 隐藏/剪切的元素在被选择时变得可见。
• 隐藏/剪切元素下方的元素不可单击。
• 这表明z-index高度是正确的。
• 它只发生在非常特殊的情况下；其余相同风格的物品效果很好。相同的项目可能在稍大/更小的屏幕宽度下正常工作。
• 应用 3D 变换可以解决此问题。

scale3d当我应用 CSS 转换（例如或 ）时，问题就消失了translate3d。我想这是因为某些 CSS 属性导致浏览器切换到 GPU 加速。

在这种情况下，切换到快速渲染路径似乎可以改变绘图顺序，足以解决问题。