XHR/setTimeout/Promise not finishing until scrolling stops in Chrome

Question

In Chrome, if the user is scrolling all XHRs and setTimeouts will be delayed until scrolling stops and I need a workaround for this. The behavior is described in this blog post. Although this feature helps mobile scrolling, it is disastrous for infinite scroll, which is what I'm trying to do.

Evidence That This Is Happening:

• All other browsers work fine, Chrome shows an empty screen until the user stops scrolling.

• The network panel will show all requests as pending until scrolling is over, then they all finish at once.

• Put this in a snippet, run it then start scrolling immediately. The setTimeout will not be called until after the scroll finishes.

var p = new Promise(function (resolve) {
    setTimeout(function () {
        console.log('resolving');
        resolve();
    }, 1000)
});

p.then(function () {
    console.log('DONE!!');
})

Answer 1

Depending on your exact scenario and desired browser support, I'd try Service Workers - which are meant for tasks such as the one you're handling (and can intercept all traffic), or a Web Worker to do your AJAX in the background.

Answer 2

Since this has to do with the engine, I don't think a workaround is possible. Instead I have filed a bug report with the Chrome team.

https://bugs.chromium.org/p/chromium/issues/detail?id=661155