vvo/lazyload

Scroll on ipad doesn't seems to fire onload event until the pressure is released

abarre opened this issue · 7 comments

abarre commented

Hi @vvo,

On ipad, we can see a bad lazy loading because it seems that until the pressure on the screen is not release (during the scrolling), no images is shown.

To reproduce the behavior, you need to go to your demo site on an ipad (safari or chrome) and scroll slowly and look at what happens when you release the pressure.

I try to understand what's going on but that's not obvious.
The infos I have for the moment 👍
http://stackoverflow.com/questions/20318002/animate-on-scroll-in-mobile-safari
http://stackoverflow.com/questions/10482227/javascript-dom-changes-in-touchmove-delayed-until-scroll-ends-on-mobile-safari/10856671#10856671
http://api.jquerymobile.com/scrollstart/

vvo commented

So we may need a setInterval while touch is on for mobile.

Are you up to writing the implementation?

abarre commented

I will try a fix today.

abarre commented

I tried to use the events touchmove, touchstart and touchend to detect the start of the scrolling but then I realize that the DOM is simply not updated at all during the scroll.
The setInterval fix doesn't work in a better way.

Here a demo of the problem : https://gist.github.com/abarre/2f53b860ac205ac87802

I tried on my phone (nexus 4) and the refresh rate of the DOM during the scrolling is very slow.

So, I think that I will disable the lazyload on mobile or phone by verifying if there is the property window.orientation.

Do you have any idea?

vvo commented

I guess the IPAD browser freeze the webpage as an image to get fast scrolling.

Try this on IPAD: https://www.webkit.org/blog-files/3d-transforms/morphing-cubes.html

It's a CSS3 animation and if you scroll, it freezes everything.

abarre commented

I will disable the iOS support for the lazyload since it freeze the DOM manipulation.

vvo commented

Yup we can close this