灯箱叠加层不在Chrome上显示，但在Chrome Canary上运行良好 [英] Lightbox overlay not displaying on Chrome but works well on Chrome Canary

问题描述

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

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

另一个奇怪的是，灰色黑色叠加层将弹出IF

1. 我调整了浏览器的大小


2. 隐藏并检查了页面上的HTML元素

任何帮助将不胜感激。

谢谢！

解决方案

这似乎是错误在Chrome 33& 34 （我有34，可以确认它仍然在发生）。根据该错误报告，这应该在Chrome 35中修复（它已于4月10日发布）。

在发布之前，似乎最好的解决方法是禁用衰落。添加滚动条（overflow：scroll;）似乎也可以，但是你有一个额外的滚动条集。

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

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

  @media屏幕和（-webkit-min-device-pixel-ratio：0）
 {
 .lightboxOverlay {溢出：滚动; } 
 .lightboxOverlay ::  -  webkit-scrollbar {width：0px; } 
} 
  

对于 jquery.blockUI.js 搜索...

  lyr2._fadeIn（opts.fadeIn，cb1）; 
  

替换为...

  lyr2.show（）; 
  

I've got some issues on Lightbox Overlay which it displays perfectly on Chrome Canary, Safari, Firefox and IE. Except for Chrome (version 33).

Screenshots: ** Lightbox on any browser except Chrome : http://awesomescreenshot.com/0952i236a2 ** Lightbox on Chrome : http://awesomescreenshot.com/0522i2378a

Another weird thing is, the Gray black overlay will popup IF

1. I resized my browser
2. Hovered and inspected an HTML element on the page

Any help would be appreciated.

Thanks!.

解决方案

This appears to be a bug in Chrome 33 & 34 (I've got 34 and can confirm that it is still happening). According to the bug report, this should be fixed in Chrome 35 (it was released to beta April 10th).

Until that is released, it seems the best fix is to disable fading. Adding scrollbars (overflow: scroll;) seems to work as well, but then you have an extra set of scrollbars.

I'm having this problem in jquery.blockUI.js. For others out there, you can update this line...

For Lightbox users, try adding this CSS...

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

For jquery.blockUI.js users, search for...

lyr2._fadeIn(opts.fadeIn, cb1);

Replace with...

lyr2.show();

这篇关于灯箱叠加层不在Chrome上显示，但在Chrome Canary上运行良好的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！