Overlay sometimes didn´t appear in Chrome

[PeterWalk]

Hello,
I have problem with lightbox overlay on my web page. It works fine in IE, FF, but in Chrome sometimes didn´t apper. I read all this issues, but I didnť find the solution.
I tested it with the F12 console and it seems everything OK. The "display: none" and "display: block" changes how should.
In the case, that overlay isn´t visible, it just change size of the window, or move mouse in the console over different div and this "refreshing" of page will appear the overlay.
Can you help me please?

P.S. I had a problem with overlay too, that its hight wasn´t over whole page, but I fixed it, when I change overlay position from absolute to fixed in css.
Do you think, it is some relationship between this bugs?

[eddievlagea]

I can confirm. This used to work on older version of Chrome. Right now the lightboxOverlay appears only after resizing the window.

[eddievlagea]

The only fix that I found for this so far was to set the fadeDuration to 0.

[siegfriedgrimbeek]

I too can confirm this error. Setting the fade duration to 0 does work but looks really bad when closing the lightbox.

Replace:
this.$lightbox.fadeOut(this.options.fadeDuration); this.$lightbox.fadeOut("slow");
this.$overlay.fadeOut(this.options.fadeDuration); with this.$overlay.fadeOut("slow");

This does the trick!

[PeterWalk]

Thanks guys,
it seems, that this trick with fadeDuration 0 and fadeOut("slow") works!
I experimented then with the fadeIn, because with Duration 0 it isn´t so nice, but when I replaced it with ("slow") too, the bug will appeared again :-/

[lokesh]

I'm able to recreate this issue as well. I'm using Chrome v33.0.1750.152 in OSX. This is a tricky one. 🐛

The CSS values for the overlay at the start and end of the fade seem to be correct but Chrome sometimes does and sometimes doesn't render the element. Interestingly, I see this problem more often on my Macbook Pro w/Retina display versus my non-retina external display.

If you resize the window or have Developer Tools open and mouse over an element in the Elements panel the overlay will appear. I'm going to continue investigating this issue. If anyone makes progress, please post here. Thanks!

[quids]

I'm having this issue also. Would be great to hear when there is a solution as I'm using it for a site that's ready to launch! Thanks.

[quids]

Solved the mystery on mine at least. Don't know why but it was being caused by having a line-height set on the body tag in the main css doc for my site. When I removed this it fixed the issue.

[sashkanz]

What is interesting that such issue doesn't replicated for me on lighbox main page http://lokeshdhakar.com/projects/lightbox2/
But it does on my project, I wonder what causes it, my chrome version is 33.0.1750.154 m

[lokesh]

This might be related to be a Chrome browser bug. The reported bug and some discussion:
https://code.google.com/p/chromium/issues/detail?id=345894
dimsemenov/Magnific-Popup#381

A fix is in the Chrome nightlies and will hopefully appear in Chrome stable release soon.

Does someone have steps to recreate this issue consistently?

[lipoh]

I have found way to partly overcome this Chrome bug.

In lightbox.js after line 188

this.$overlay.fadeIn(this.options.fadeDuration);

I have putted those lines:

// Select current height with jQuery
var TmpHeigh = this.$overlay.css('height');
// Set new css property value with 1px less to force Chrome touch the element.
this.$overlay.css('height', parseFloat(TmpHeigh)-1);  

When Chrome fails to animate the overlayer, the change of css will force Chrome to show the layer as it is.

The final flow of window is not so pretty, but at least the overlay appears. This change also seems to has not impact on another browsers, which are capable to animate the overlay.

[Lakshmana515]

I have the same issue, overlay not appearing in Chrome Version 33.0.1750.154 m Windows 8.1, but i do see also on the lightbox main page it is working..

[IvicaCulina]

Something similar is happening to me. When i open the site in chrome the overlay works just as it should. But when i include the Google map API javascript in my site overlay doesn't show until i resize the browser window.

[Triloworld]

Problem with lightbox.
Overlay don't show until like said lokesh: If you resize the window or have Developer Tools open and mouse over an element in the Elements panel "
And don't use screen.css.Using this script to reproduce problem:
http://code.jquery.com/jquery-1.11.0.min.js
modernizr-2.6.2-respond-1.1.0.min.js
bootstrap.min.js
lightbox-2.6.min.js
jquery.scrollTo.min.js
jquery.localScroll.min.js
static/js/prefixfree.min.js
lightbox-2.6.min.js
https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"

[aminalhazwani]

In my case only setting this.fadeDuration = 0; "fixed" the problem. Any solution without sacrificing the fade? (Chrome 34.0.1847.116 on OSX 10.9.2)

[elahmo]

Any updates regarding this, is there a way to keep the fade effect but show the overlay?

[aminalhazwani]

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

[elahmo]

This did it!

Did you notice any side effects of this?

[aminalhazwani]

So far I haven't noticed any

[mcurtin]

The overflow:scroll did resolve the issue in Chrome. Thanks for finding this! The one issue that I am noticing now is obviously the double scrollbar that now appears with the overlay. There is a quick line of CSS that can be added to remove this.

.lightboxOverlay { overflow: scroll; }
.lightboxOverlay::-webkit-scrollbar { width: 0px; }

This worked perfectly to hide that extra scroll that appears in the overlay.

[sashkanz]

That's fix it in chrome only, firefox,safari, ie11 still have these scrollbars
This is what I came up with:

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

[aminalhazwani]

Can you attach a screenshot of the double scrollbar because I cannot replicate it, thanks.

[mcurtin]

The addition of the @media screen and (-webkit-min-device-pixel-ratio:0) worked for me as well. This ensures that the overflow:scroll is only applied in the Chrome browser. Here is a screenshot of the double scrollbar that appears in other browsers if this is not applied.

[DonSandini]

overflow:scroll; did the job for me too!!!
I also added width:101%!important; so that blank space could be filled up.

[misak113]

I fixed the overlay rendering in chrome using webkit specific CSS. No other browsers are affected ;)

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

-- Written in LESS --