Lay Theme Forum

Done. It seems to have fixed the problem. Thanks!

It’s been frustrating, especially since we only launched the website last week. That said, I really appreciate your support. I’m hopeful that we can find a solution, as everything was working properly before.

What I’ve just noticed is that, on pages where the images do not appear initially, refreshing the page makes them display correctly.

In fact, the images seem to be loaded, but Firefox does not render or display them.

The same issue also occurs on newly created pages. For example, my client created a new page today, and the first two rows of images still did not appear on the first visit.

https://www.dropbox.com/scl/fi/i1n7zgyw322o0casio2ea/Scherm-afbeelding-2026-07-13-om-15.32.54.png?rlkey=4ljmhbsbe1jbfz8g07g66rscf&dl=0

https://www.dropbox.com/scl/fi/ey4hiez7ejn7kv0rnqnaa/Scherm-afbeelding-2026-07-13-om-15.33.02.png?rlkey=fyzr64g92kicdzqiv45gkjdb0&dl=0

Hmm. Please see the screenshots of the console and network tabs. We are not currently using any caching plugin. I’ll need to check whether the hosting provider has enabled any server-side caching.

WordPress Site Health reports a critical issue because my site has several large autoloaded options. The biggest entries are Lay Theme transients such as transientlaylayoutmastercache and transientlaylayoutprojectoverlay, together accounting for more than 3 MB.

Is this expected behaviour in Lay Theme, and can these caches be stored without autoloading them on every request?

Would you recommend updating Lay to the latest version for this site?

Hmm, strange. It’s happening on both my computer and my client’s computer.

I’m using macOS Tahoe 26.5 with Firefox 152.0.5.

I’m not sure disabling lazy loading entirely would be the best solution, since the website contains a large number of high-resolution images. Performance is important for this site, so removing lazy loading could have a noticeable impact on loading times and data usage.

Hi Armin, I already recorded the issue in a Firefox Private Window, as shown in the screen recording I shared.

I think I found the cause. When I disable the lazy load option, all images display correctly in Firefox.

As mentioned earlier, everything works correctly in Safari, even with lazy loading enabled.

So this does not seem to be an SSL or mixed-content issue. The issue appears to be related to the lazy-loading behavior in Firefox.

Could you please check whether the theme/lightbox lazy-load implementation needs a Firefox compatibility fix?

Hi Armin,

See here a screen recording of the issue. Note that this only happens in Firefox:

https://www.dropbox.com/scl/fi/w47ltkvk1exttr7ma7osb/Schermopname-2026-07-09-om-10.26.16.mov?rlkey=ojcek77korg012u483kec0f4i&dl=0

In Safari, everything displays correctly.

Hi Armin, thanks!

The lightbox works fine after the update to 11.4.7.

On the Version History page, you mention 11.4.8. Is that a typo?

Hi Armin,

After the latest updates, several images are no longer displaying, and the lightbox is not working properly, especially on desktop.

This is causing issues on the live website, and my client is understandably unhappy with the current situation. Could you please investigate what is causing this and let me know how it can be fixed?

Website: https://www.nataschalibbert.nl/

Best, M

Thanks for the update, Armin. It works now.

The only thing I had to do was set one image in the row to 'Natural'. This defines the row size. If all the other images are set to 'Stretch', they all get the same height.

Thanks again!

I have created a test page with two rows of images:

https://www.nataschalibbert.nl/work/transit-test-2/

Thanks, Armin, for taking the time to look into this issue and for sharing your suggestions.

Unfortunately, the custom code does not solve the problem properly. The images no longer scale as expected, which creates unwanted gaps between images at certain resolutions.

I have also tried all the other suggested solutions, but none of them seem to work reliably. Each approach introduces new 'issues' (in my case) related to scaling, image ratios, or layout behavior.

It is not ideal, but I am fine with rebuilding all project pages if that is the best way to solve the issue properly.

The setup below, in a new row, comes closest to how it currently works correctly in Firefox and Chrome. However, even with these settings, it still only works in Firefox and Chrome. Image Stretch does not work correctly in Safari?

Settings:

Row Size: Natural
Image Size: Stretch

That’s correct. However, the issue is actually visible on all project pages under “Independent projects / Art commissions”.

On these pages, the images are placed in the grid with the Lightbox option enabled.

The issue does not occur on the project pages under “Client-based work / commissions”, where we are using the Element Grid instead.

Small update: I tested the individual changes separately. Setting only .grid-inner background to transparent did not make the images visible. Setting only pointer-events:none on .grid-inner also did not. Forcing only .slide-inner img to a high z-index also did not.

The images only became visible with the combined diagnostic override:

• .grid-inner pointer-events none
• .grid-inner background transparent
• all img elements position relative
• all img elements very high z-index

So the issue seems to involve an interaction between the grid layer and the image/slider stacking context, not one isolated property. Safari loads and renders the images, but they are visually covered or placed behind another layout layer.

Hi Armin,

I’ve narrowed the Safari issue down further.

The images are loading and decoding correctly. In Safari’s console they return complete: true, valid naturalWidth/naturalHeight, and normal rendered dimensions, for example around 716x477. So it is not a missing image, broken URL, cache, MIME, or JPG decoding issue.

The problem appears to be CSS stacking/layout. document.elementFromPoint() at the center of a rendered image returns .grid-inner instead of the image itself. When I temporarily made .grid-inner transparent and forced the images to a very high z-index, the images became visible again.

So Safari seems to place a .grid-inner layer above the project images, or the slider/gallery is ending up in the wrong stacking context. The likely fix is to adjust the z-index/positioning/background of the project gallery versus .grid-inner, rather than changing the image files.

The temporary test code that made the images visible was:

document.querySelectorAll('.grid-inner').forEach(el => {
el.style.setProperty('pointer-events', 'none', 'important');
el.style.setProperty('background', 'transparent', 'important');
});

document.querySelectorAll('img').forEach(img => {
img.style.setProperty('z-index', '999999', 'important');
img.style.setProperty('position', 'relative', 'important');
});

This is only diagnostic, not a production fix, because it affects all images globally. But it confirms the issue is almost certainly a Safari-specific stacking/overlay problem involving .grid-inner, position, z-index, background, or a related gallery container.

Hi Armin,

After one of the latest updates, I noticed a new issue: no images appear on my project pages in Safari. Everything works correctly in Firefox and Chrome.

Do you know what might be causing this?

All the best,

M