CODEWITHSUNDEEP
jqueryhtmlcssgoogle-chromelightbox2
Shiro
Shiro

Reputation: 273

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

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

Any help would be appreciated.

Thanks!.

Upvotes: 5

Views: 4440

Answers (3)

Migs
Migs

Reputation: 264

Adding this CSS rule fixed the problem w/o sacrificing the fade:

.lightboxOverlay { 
   overflow: scroll; 
}

This worked for me and was found here.

Upvotes: 0

Brian
Brian

Reputation: 38025

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

Upvotes: 0

s_cicero
s_cicero

Reputation: 155

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.

Upvotes: 0

Related Questions