Lay Theme Forum

Thank you, Armin!

https://www.nataschalibbert.nl/

Browser and device details:
Safari version: 27.0.1 (22625.1.29.11.28)
Device: iPhone 13 mini
iOS version: 27.0.1

Hi,

My client noticed that unexpected vertical spacing appears between certain menu items on her website when viewed in Safari, both on desktop and mobile.

In Firefox, the menu displays correctly, without these extra spaces.

Issue:

• Unexpected blank spaces appear between certain menu items.
• The issue occurs in Safari on both desktop and iPhone.
• The spacing is inconsistent and does not appear in Firefox.
• The issue is visible in the attached screenshots.

Expected behavior:

• Menu items should appear with consistent vertical spacing, as they do in Firefox.

Could you please investigate whether this is a Safari-specific rendering issue and advise on how to resolve it?

Thank you!

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.