search

twobin / react-lazyload

Lazy load your component, image or anything matters the performance.
MIT License
5.88k stars 488 forks source link

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

Open igoralemasow opened 7 years ago

igoralemasow commented 7 years ago

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 commented 6 years ago

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

borisrorsvort commented 6 years ago

@jasonslyvia same issue, is there a trick?

chaddjohnson commented 6 years ago

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

nickhingston commented 6 years ago

also if container view is display: flex...

alex-lechner commented 5 years ago

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

DavidLozzi commented 5 years ago

:(

micahblu commented 5 years ago

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 commented 5 years ago

Thank you. I have the same problem.

atulgpt commented 3 years ago

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 commented 3 years ago

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