Bug 268152 – requestIdleCallback intermittently fails to invoke callbacks

• Component: DOM
• Status: RESOLVED DUPLICATE

[Daniel]

I set the severity to major since it would be *very bad* if a broken requestIdleCallback got shipped in the next stable safari version, web devs would have to deal with the fallout of this broken version being in the wild for years to come.

----

First of all: AMAZING that Safari is finally getting requestIdleCallback (referring to https://bugs.webkit.org/show_bug.cgi?id=260369).

However, it unfortunately doesn't seem to work as expected. It's quite glitchy and sometimes never fires, even when the browser is obviously completely idle.
In Safari Technology Preview (Release 187 (Safari 17.4, WebKit 19619.0.1.2)) where it's enabled by default, it doesn't seem to work at all sometimes (or is *very* spotty). To illustrate this example, creating a totally blank index.html file and then running requestIdleCallback inside it would be expected to fire immediately, like it does in Firefox and Chrome. In Safari however it seems to sometimes fire after a minute, even after disabling all browser extensions (see attached video).

As for a real world example:
If you go to https://singular-society.com/search?q= all but the first 8 images are loaded using requestIdleCallback. This is to increase performance when scrolling down as it was previously terrible and after some profiling loading ~20 images per product card turned out to be the culprit, with the easiest solution being to defer loading the images until the browser is idle.

If you visit the page in chrome and scroll down ~20 images, you will notice that the loading of the images is delayed a bit to keep the browser smooth but they still load really quickly. If you visit it in safari technology preview, the images don't load at all for minutes (seems to only sometimes happen. Try: after a fresh browser start, first go to singular-society.com and then click on the search icon and then press enter, then scroll down a bit). (See also attached video)

Let me know if you need more help reproducing this.

[Daniel]

Created attachment 469556 [details]
A real world example that shows how image loading is delayed too far, due to requestIdleCallback being buggy

[Daniel]

Created attachment 469557 [details]
Video showing how requestIdleCallback fires after a minute on an empty page, should fire directly

[Radar WebKit Bug Importer]

<rdar://problem/121880350>

[Ryosuke Niwa]

Created attachment 470650 [details]
Reduction

Reproduction steps:
1. Open idle.html
2. Move the cursor out of the browser window

Result:
"idle3" doesn't get logged until some cursor movement is triggered on the browser window.

[Ryosuke Niwa]

Fixing this as a part of the bug 268058.

*** This bug has been marked as a duplicate of bug 268058 ***