search

beekai-oss / react-simple-img

🌅 React lazy load images with IntersectionObserver API and Priority Hints
MIT License
989 stars 41 forks source link

iOS - Images don't load on initial page load until scroll #19

Closed dustinkerstein closed 6 years ago

dustinkerstein commented 6 years ago

On iOS devices (so far only tested on an iPhone 5s running iOS 11.3) I can't seem to get any of the in-view images to load initially. It always requires a scroll (even the slightest triggers it). Have you ever seen that behavior?

bluebill1049 commented 6 years ago

i have used for my project, didn't have issue. can you try out the demo see if there is an issue

https://react-simple-img.herokuapp.com/

dustinkerstein commented 6 years ago

Yeah, that works fine. I imagine it has to do with that same issue in #16 which I think is likely due to using an overflow div. Have you tried that?

bluebill1049 commented 6 years ago

what do you mean overflow div? you have a link to your page?

dustinkerstein commented 6 years ago

The CSS overflow property - https://www.w3schools.com/css/css_overflow.asp when set to "scroll"

You can see it on https://my.panomoments.com/explore

bluebill1049 commented 6 years ago

page looks nice :) for ios device is using intersection observer poly-fill, because intersection observer API still under development.

https://github.com/w3c/IntersectionObserver

I reproduce the issue on my phone, is there a way you can trigger scroll event on ios device for the meantime until observer interaction is ready for iOS device with overflow scroll?

dustinkerstein commented 6 years ago

Thanks :)

I will try that tonight. Though if I was able to workaround/fix #16 I think I'd get two birds with one stone.

bluebill1049 commented 6 years ago

oh wow nice one 👍shared your project in the team.