Change Details

Per comments and text in T135430, it seems like the loaded image animation does not trigger until the scrolling stops on mobile browsers (reproduced both on Android chrome and iOS safari). The animation and the image appearing should happen even if the user is scrolling with their finger down, not on scroll stop (or lifting the finger). Some possible causes for the behavior: * We're using `mw.mobileFrontend.on('scroll')` which is debounced. It may be the case that the debounced `scroll` event doesn't get triggered until the scroll finishes, and that's why this behavior is being observed. A solution may be switching to listening to a *throttled* scroll instead of a *debounced*. * It may be that the browser is not triggering CSS animations until scrolling stops (needs verification). Switching to a CSS transition would fix this if the premise was true. Be careful with CSS transitions since triggering them reliably across browsers so that the animation always happens has proven to be tricky (that's why we switched to css animations for this, see T135430#2378887 for more info). AC: * [] While scrolling, lazy images get loaded and animated in, even when the scrolling never stops (scrolling finger always down)

Per comments and text in T135430, it seems like the loaded image animation does not trigger until the scrolling stops on mobile browsers (reproduced both on Android chrome and iOS safari). The animation and the image appearing should happen even if the user is scrolling with their finger down, not on scroll stop (or lifting the finger). Some possible causes for the behavior: * We're using `mw.mobileFrontend.on('scroll')` which is debounced. It may be the case that the debounced `scroll` event doesn't get triggered until the scroll finishes, and that's why this behavior is being observed. A solution may be switching to listening to a *throttled* scroll instead of a *debounced*. * It may be that the browser is not triggering CSS animations until scrolling stops (needs verification). Switching to a CSS transition would fix this if the premise was true. Be careful with CSS transitions since triggering them reliably across browsers so that the animation always happens has proven to be tricky (that's why we switched to css animations for this, see T135430#2378887 for more info). AC: * [] Verify the issue still exists (since T133565 was resolved) * [] While scrolling, lazy images get loaded and animated in, even when the scrolling never stops (scrolling finger always down)

Per comments and text in T135430, it seems like the loaded image animation does not trigger until the scrolling stops on mobile browsers (reproduced both on Android chrome and iOS safari). The animation and the image appearing should happen even if the user is scrolling with their finger down, not on scroll stop (or lifting the finger). Some possible causes for the behavior: * We're using `mw.mobileFrontend.on('scroll')` which is debounced. It may be the case that the debounced `scroll` event doesn't get triggered until the scroll finishes, and that's why this behavior is being observed. A solution may be switching to listening to a *throttled* scroll instead of a *debounced*. * It may be that the browser is not triggering CSS animations until scrolling stops (needs verification). Switching to a CSS transition would fix this if the premise was true. Be careful with CSS transitions since triggering them reliably across browsers so that the animation always happens has proven to be tricky (that's why we switched to css animations for this, see T135430#2378887 for more info). AC: * [] Verify the issue still exists (since T133565 was resolved) * [] While scrolling, lazy images get loaded and animated in, even when the scrolling never stops (scrolling finger always down)