Envira Gallery: images initially overlap and are only displayed correctly after reload or mouse movement

[Daryl_Shaw]

I have a problem with the envira gallery under current Pro / Cornerstone: When loading the gallery for the first time, the images are not displayed vertically with the set gap distance, but overlap each other (mode: masonry). After a mouse movement or reload the gallery rebuilds correctly. This happens in Chrome as in Firefox, on desktop and mobile (in order to reproduce the problem, the browser cache must be emptied after a test reload. The problem comes up only at inital load).

I am aware that it could be an Envira problem, but I would like to ask you to check whether it is due to any settings under Cornerstone and whether it can be fixed.

Initial load desktop: Images overlap vertically.

After mousemove or reload: correct

Same at mobile devices: inital load

After move or reload: correct

[nabeel]

Hi Daryl,

Thank you for reaching out to us. The issue was happening because of the Lazy Loading option. I disabled it and it seems to have fixed the issue.

This happens when the scripts run before the images are loaded, lazy loading feature might be doing the same. Please test your site and let us know how if it helps.

Cheers!

[Daryl_Shaw]

Ok, i see, thanks!
But isn’t it actually the purpose of lazy loading that it helps to reduce the loading volume, especially with such “infinite galleries” - and still brings correct displays? Then what can I use it for?

[ruenel]

Hi Daryl,

When the gallery loads, the plugin sets the initial width and height of the item boxes. When Lazy loading is enabled, those boxes are empty yet. As soon as the images are loaded, the images fill the boxes, and most of the image overlaps the bounds of the box. When you resize the browser, the issue disappears because the plugin reinitiates the width and height of the boxes and since the images are already loaded, the gallery displays nicely.

Please see the difference between when the lazy loading is disabled and how the gallery behaves when the lazy loading is enabled as well.

Best Regards.