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

Question

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

yep, same here. Also thanks a lot @MatTheCat for github link, that's help. — Aleks Dorohovich, Apr 01 '14 at 00:01
I've got a lightbox JS plugin you can use if you just want a solution — ArtOfCode, May 13 '14 at 21:03

score 0 · Answer 1 · answered Apr 02 '14 at 18:25

0

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.

answered Apr 02 '14 at 18:25

s_cicero

155
11

score 0 · Answer 2 · answered May 05 '14 at 20:41

0

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.

answered May 05 '14 at 20:41

Migs

264
3
11

score 0 · Answer 3 · answered May 13 '14 at 20:54

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();

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

3 Answers3

Linked