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

[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!