Justified Gallery not visible in maximized window in Chrome and Firefox on Windows 10

[acwolff]

This album with a Justified Gallery works OK on a Windows 10 system if the Microsoft Edge browser is used. Also on an iPad there are no problems.

But with Chrome vs 68 and Firefox vs 61 the Justified Gallery is invisible if I start with a maximized window. If I next select a normal window (Windows key + Down arrow key). it is still not visible, but it shows up if I make the window a little bit smaller or wider. If I start in a non-maximized window the Gallery is mostly immediately visible. If I test it locally on my PC, I see also no problems.

The next code is used:

$("#thumbsgallery").justifiedGallery({
    rowHeight : 80,
    maxRowHeight : '200%',
    lastRow : 'center',
    captions : true, 
    waitThumbnailsLoad: false,
    border : 20,
    refreshSensitivity: 18,
    cssAnimation: false,
    captionSettings: {animationDuration: 800, visibleOpacity: 1.0, nonVisibleOpacity: 0.4},
    margins : 4
});

<div id="thumbsgallery" class="thumbs-jg" >
<a data-fancybox="S" href="slides/150530-171803_Heino.jpg" data-width="1920" data-height="983" id="0" data-caption= 'Onze nieuwe bus op de Camping Heino'>
  <img src="thumbs/150530-171803_Heino.jpg" width="156" height="80" alt="" title="1: 150530-171803_Heino<br> Onze nieuwe bus op de Camping Heino" />
</a>

If I click F12 without visible gallery the code is changed into:

<div id="thumbsgallery" class="thumbs-jg justified-gallery" style="height: 0px;">

<a data-fancybox="S" href="slides/150530-171803_Heino.jpg" data-width="1920" data-height="983" id="0" data-caption="Onze nieuwe bus op de Camping Heino" class="jg-entry" style="width: 0px; height: 0px; top: 24px; left: 20px; opacity: 1;">
  <img src="thumbs/150530-171803_Heino.jpg" width="156" height="80" alt="" data-tippy="" data-original-title="1: 150530-171803_Heino<br> Onze nieuwe bus op de Camping Heino" style="width: 0px; height: 0px; margin-left: 20px; margin-top: 10px; opacity: 1;">
</a>

Notice the style="height: 0px;" which explains why it is invisible

If I click F12 with visible gallery the code is changed into:

<div id="thumbsgallery" class="thumbs-jg justified-gallery" style="height: 638.084px;">

<a data-fancybox="S" href="slides/150530-171803_Heino.jpg" data-width="1920" data-height="983" id="0" data-caption="Onze nieuwe bus op de Camping Heino" class="jg-entry" style="width: 157px; height: 80.3831px; top: 20px; left: 20px; opacity: 1;">
  <img src="thumbs/150530-171803_Heino.jpg" width="156" height="80" alt="" data-tippy="" data-original-title="1: 150530-171803_Heino<br> Onze nieuwe bus op de Camping Heino" style="width: 157px; height: 81px; margin-left: -78.5px; margin-top: -40.5px; opacity: 1;">
</a>

To see this problem open my Album in maximized mode. If you click the “Nijenhuis” button another album with the same problem opens. Go back to the first album by clicking the “Fietstocht” button.

Your help to solve this problem is appreciated!

Edit:

I discovered that it depends on the server:

This works OK: https://andrewolff.jalbum.net/Heino/ This gives problems: https://www.andrewolff.nl/FotoSerie/Wandelingen/Heino/index.html

[acwolff]

To suppress some flickering of the gallery when the page was loaded, I did initially hide the the div with the gallery via css code:

#indexDiv {
    display: none;
}

At the end of the .ready() function I did show it: $('#indexDiv').show();

This is apparently not a good idea, because after I removed the css code the problem was solved.