5

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

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

野生动物园：好

以下是 Chrome 中发生的情况：

铬：不好

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

我整天都在看这个，并尝试使用不透明度、z-index 等不同的解决方法，但一无所获。这个故障是否会为任何人敲响警钟？有没有办法强制 Chrome 渲染 div，一旦它被定位和取消隐藏？我对任何解决方法或黑客都很好。

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

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

4

3 回答 3

4

（根据我的评论）

这似乎确实是 Chrome 中的一个错误，尽管没有更小的测试用例来重现它，但可能很难追踪。您可能希望向 Chrome 团队报告尽可能多的信息。

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

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

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

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

于 2013-05-04T06:02:51.277 回答
1

超级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');
});

这不会立即修复它，但似乎如果它在那里，一旦你将鼠标悬停在某个东西上，它就会在你下次悬停在它上面时起作用。

于 2013-05-04T05:35:40.567 回答
0

不确定这是否对您的情况有所帮助，但在过去的几天里，我开始注意到 Facebook 和 Weight Watchers 上的某些网站元素不再出现。具体来说，它似乎正在影响（我认为）受 Javascript 控制或依赖于 Javascript 的项目。当我在 Firefox 和 Safari 中调用这些站点时，它们按预期工作。

于 2013-05-04T13:17:54.173 回答