**Bug report: carousel-lazy-img not loading in Safari 26 (macOS 26.5)**

[MWPA]

Hi,

Images on project/work pages using the carousel layout fail to load in Safari 26 on macOS 26.5. The same pages load perfectly in Firefox and Chrome.

What's happening

Lay Theme uses data-lay-src and data-lay-srcset attributes on images with the class carousel-lazy-img to handle lazy loading. In Safari 26, the lazy loader (frontend.app.min.js) does not swap these attributes into the actual src and srcset — so images remain as base64 placeholders and never load.

I confirmed this by inspecting the DOM in Safari's DevTools. The data-lay-src attribute is correctly present in the HTML, but the image src is never updated from the placeholder. No JavaScript errors appear in the console. The network tab shows zero image requests being made for the carousel images, confirming the lazy loader simply never triggers in Safari 26.

Steps to reproduce

1. Create a page using the carousel/gallery layout with multiple images
2. Open the page in Safari 26 on macOS 26.5
3. Images remain blank — only base64 placeholder GIFs are shown

Environment

• Lay Theme (latest version)
• WordPress 7.0
• Safari 26, macOS 26.5
• Affects both desktop and iOS Safari 26

Happy to provide a test URL if that helps. Thanks!

[MWPA]

https://dev.nataschalibbert.nl/work/transit/

[arminunruh]

hey, I will release a carousel update later today. Can you then install it and let me know if that fixed it

[MWPA]

Thanks, Armin. It seems the update fixed the problem.

[MWPA]

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

[arminunruh]

ok i will update my mac os now and test this

[MWPA]

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.

[MWPA]

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.

[arminunruh]

ok is that the exact page where you're seeing the issue, right?
https://dev.nataschalibbert.nl/work/transit/

[MWPA]

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.

[arminunruh]

sure, im gonna fix it today

[arminunruh]

oh, can you use this CSS for a quick fix?

.lay-row-same-height-elements{
height: 200px!important;
}
.lay-row-same-height-elements .row-inner{
height: 200px!important;
}

or use this one for more specificity:

.lay-row-same-height-elements.lay-row-same-height-include-image{
height: 200px!important;
}
.lay-row-same-height-elements.lay-row-same-height-include-image .row-inner{
height: 200px!important;
}

insteand of 200px you can also use for example 20vw. that should probably look more like it does in the gridder then.

i finally installed the latest macos update and can use the browser now.
seems like you made all images be

align-self: stretch;
display: flex;

by using the stretch sizing.

i recently changed the UI for setting this. before it was "same height elements" setting in rows. you did nothing wrong, just seems like this doesnt work anymore in the latest safari...

it looks like the latest version of safari just collapses the parent container if all children are stretch.

here are some alternative solutions you could do but i would do the one i suggested to you at the start if i was you, cause its the easiest.

what you could do:

click the row, give it a custom height

OR

what i think would be even better:
create a new row, move the images into that row, select the images, simply give the images a fixed height:

OR

create a new row, move the images into that new row,
select them, make sure they are set to size natural:

now use the auto layout mode:
https://laytheme.com/documentation/layout-modes.html#auto-layout

this way you can select the images, and make them sized by height instead of width:

[arminunruh]

but probably i can just code it in lay theme so the container gets a fixed height in that case hmm
but i will have to think about it more cause i dont want to introduce more problems with this fix mmmh

[MWPA]

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

[MWPA]

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

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

[arminunruh]

hey you shouldnt have to redo everything, i will code a fix and release it today i think

.column-wrap{
min-height: 20vw;
}

its gonna do sth like this but only for the right containers (thats sth you cant do right now)
and that will fix it for safari and then u wont have to redo everything

[arminunruh]

we'll release the update today with the fix. If it still does not work, then please send me an email to info@laytheme.com with a link to this topic, your website address, and your WordPress admin login.

[MWPA]

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!