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

Question

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

以下是悬停弹出窗口的外观（以及Firefox，Safari，IE中发生的情况）：

以下是Chrome中发生的情况：

如果你在5月24日使用浏览器窗口宽度~1200px（显然更宽或更窄的窗口似乎不起作用），你可以在this site上看到它正在运行。毛刺仅影响左侧弹出的菜单右下角的弹出窗口，例如那些在5月24日的那些。在页面中使用相同的确切机制的徘徊工作就好了。 Glitched弹出窗口是不可见的（除了部分克拉），但是如果你点击链接将弹出窗口固定到位，然后在移动鼠标的同时按住左键，就好像要在弹出窗口应该选择的区域中选择“选择文本”然后，它将部分呈现。此外，如果我打开开发工具并尝试选择弹出窗口，它将在那时呈现正常。

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

我为弹出窗口使用自定义（并且相当复杂）的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似乎改变了绘图顺序，足以解决问题。

Answer 2

超级hacky，但这为我解决了这个问题：

$('.drop-link.food').on('hover',function() {
  $('.tool-tip').css('overflow', 'hidden').height();
  $('.tool-tip').css('overflow', 'auto');
});

显然这不是一个“好”的解决方案，甚至保持hacky，你可以优化它只是强制重绘它需要的工具提示，但希望它有帮助......

另一条线索：

$('.drop-link').on('hover',function() {
  $(this).siblings('.tool-tip').css('display','block');
});

这不会马上修复它，但似乎如果它存在，一旦你徘徊在某些东西上，它会在你下次悬停在它上面时起作用。

Answer 3

不确定这是否有助于您的情况，但在过去几天我开始注意到Facebook和慧俪轻体的某些网站元素不再出现。特别是它似乎影响（我相信）由Javascript控制或依赖于Javascript的项目。当我在Firefox和Safari中调用这些网站时，它们按预期工作。