Lazy loading is not working if container has 'overflow-x: hidden' style

[igoralemasow]

Hi guys, I have container with the following styles: height: 100%; position:relative; overflow: auto; overflow-x: hidden;

LazyLoad component is configured with overflow={true} property. But Lazy loading is not working.

I assume this issue is related with overflowRegex.test(overflowX) condition here

Could you please check if this condition isn't superfluous. Thank you!

[khanglu]

I'm having the same issue, I cannot make the hidden components load when scrolling onto them with overflow-x: hidden.

[borisrorsvort]

@jasonslyvia same issue, is there a trick?

[chaddjohnson]

Same happens to me when I use overflow-x: auto.

[nickhingston]

also if container view is display: flex...

[alex-lechner]

ohhh man... this issue is still not resolved? Having the same problem with display: flex on the container.

[DavidLozzi]

:(

[micahblu]

Don't use flex use grid instead. The issue with flex and even floating your elements is that Element.getBoundingClientRect() does not provide an accurate top value. This is an issue with Chrome not this library which relies on that value to determine if the element is within the viewport.

[15573138624]

Thank you. I have the same problem.

[atulgpt]

I am having the same issue and the issue is happening in Chrome, Firefox and Safari. So this doesn't seem to be browser issue to me. @igoralemasow did you find any solution?

[digiage]

the issue is there even with the native lazy load (loading="lazy")