灯箱叠加层在 Chrome 上不显示，但在 Chrome Canary 上运行良好

Question

我在 Lightbox Overlay 上遇到了一些问题，它在 Chrome Canary、Safari、Firefox 和 IE 上完美显示。 Chrome（版本 33）除外。

截图： ** 除 Chrome 之外的任何浏览器上的灯箱：http://awesomescreenshot.com/0952i236a2 ** Chrome 上的灯箱：http://awesomescreenshot.com/0522i2378a

另一个奇怪的事情是，如果

灰黑色覆盖层会弹出

1. 我调整了浏览器的大小
2. 将鼠标悬停并检查页面上的 HTML 元素

如有任何帮助，我们将不胜感激。

谢谢！

Answer 1

你可以将叠加样式设置为

position:fixed;
width:100%;
height:100%;
top:0;
left:0;

如果需要，值得尝试覆盖默认样式。

Answer 2

这似乎是 Chrome 33 和 34 中的一个 bug （我有 34，可以确认它仍然在发生）。根据错误报告，这个问题应该在 Chrome 35 中得到修复（已于 4 月 10 日发布测试版）。

在发布之前，最好的解决办法似乎是禁用淡入淡出。添加滚动条（溢出：滚动；）似乎也可以，但是你有一组额外的滚动条。

我在 jquery.blockUI.js 中遇到这个问题。对于其他人，您可以更新此行...

对于 Lightbox 用户，请尝试添加此 CSS...

@media screen and (-webkit-min-device-pixel-ratio:0)
{ 
    .lightboxOverlay { overflow: scroll; }
    .lightboxOverlay::-webkit-scrollbar { width: 0px; }
}

对于 jquery.blockUI.js 用户，搜索...

lyr2._fadeIn(opts.fadeIn, cb1);

替换为...

lyr2.show();

Answer 3

添加此 CSS 规则解决了问题而无需牺牲淡入淡出：

.lightboxOverlay { 
   overflow: scroll; 
}

这对我有用，可以在这里找到。