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

【问题标题】：Lightbox overlay not displaying on Chrome but works well on Chrome Canary灯箱叠加层未在 Chrome 上显示，但在 Chrome Canary 上运行良好
【发布时间】：2014-04-22 06:54:06
【问题描述】：

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

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

另一个奇怪的事情是，如果出现灰黑色叠加层

我调整了浏览器的大小
悬停并检查页面上的 HTML 元素

任何帮助将不胜感激。

谢谢！

【问题讨论】：

github.com/lokesh/lightbox2/issues/187
是的，这里也一样。也非常感谢@MatTheCat 提供 github 链接，这很有帮助。
我有一个灯箱 JS 插件，如果你只是想要一个解决方案，你可以使用

标签： jquery html css google-chrome lightbox2

【解决方案1】：

你能把覆盖样式设置为

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

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

【讨论】：

【解决方案2】：

添加这个 css 规则 .lightboxOverlay { overflow: scroll; } 修复了不牺牲淡入淡出的问题。

这对我有用，可以在上面@MatTheCat 发布的链接上找到。

【讨论】：

【解决方案3】：

这似乎是bug in Chrome 33 & 34（我有 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();

【讨论】：