JavaScript scroll event not firing on iPhone with

Question

I use a lazy loading technique for images. Whenever a new image appears in the viewport the src attribute will be set so the image can be loaded. This technique has been working for years, until iOS7 came out.

It's working fine with a regular pageview. But when you close the browser, wait a bit, open some other apps perhaps, and then come back it isn't working anymore. Sometimes switching between tabs kills the functionality as well.

$(window).bind('scroll resize', function () {
    checkImages();
});

See JSFiddle for a complete demo: http://jsfiddle.net/NZqGL/1/

I'm aware of JavaScript execution being suspended for inactive apps and browser tabs. But events being unbound is new for me.

It's also very hard to test, since the behaviour is very unpredictable. Sometimes it takes 2 seconds of inactivity to get broken, sometimes it'll just keep working.

Tested on iOS 7.0.4

Update Feb 12th 2014: this is a confirmed bug in iOS 7.0, Apple has confirmed this will be fixed in iOS 7.1.

Answer 1

Using the touchend event is an acceptable workaround here.

There is a delay between releasing your finger and the scroll event. When you're moving your finger fast accross the screen the scrolling will continue for a while after you've released your finger.

iOS has another bug that prevents executing of JavaScript when the page is still scrolling. So effectively the touchend event will fire after the actual scrolling (instead of the moment you 've released your finger). So the scroll and touchend event fire at the same time.

For now I'm listening to both events and I use a timer/setTimeout construction to prevent the code from executing twice.