Lightbox overlay not displaying on Chrome but works well on Chrome Canary

问题

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

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

Any help would be appreciated.

Thanks!.

回答1:

can you make the overlay styles set to

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

worth a shot overwriting the default styles if need be.

回答2:

Adding this css rule .lightboxOverlay { overflow: scroll; } fixed the problem w/o sacrificing the fade.

This worked for me and was found on the link posted by @MatTheCat above.

回答3:

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...