Bug 214429

Created attachment 404490 [details]
File that reproduces the problem

If a page is left idle for about 45 seconds, the page will enter some sort of paused mode. After about 10 seconds from an event, the page will resume rendering. This makes it look like the page is unresponsive and stuck.

This is easily demonstrated by simple code like:

```

<div id="box" style="opacity:.3">hello world</div>
<div onclick="box.style.opacity=1">click me</div>

```

Steps to reproduce:

1. Load the above code (attached as rendering-pauses-bug.html)
2. Wait 1 minute
3. Click "click me"

Expected result:
The opacity of "hello world" changes instantly.

Observed result:
It takes about 10 seconds for the opacity to change.

Please see the attached video "rendering-pauses-bug-repro.mov" to see this in action.

Note that it isn't just this one property, the entire page stops rendering. So if there's an animation it won't show up either.  Code is definitely being run in the background.  There are a few ways to force rendering like resizing the window, but I haven't found any JavaScript-based methods that consistently can tickle rendering to turn back on.  This can reproduce with dev tool enabled (but they must not have focus), however the dev tools themselves will not update their view while in this condition.

Reproducibility:
Able to reproduce about 95% of the time. Sometimes it takes a bit more than 45 seconds; usually waiting a minute is enough.

Configuration:
This only occurs on macOS 10.14 with Safari 13.x.  Specifically tested with macOS 10.14.6 and Safari 13.1.2.  I could not reproduce with Safari 12, or on macOS 10.13 or macOS 10.15+Safari 13.1.1.

Impact:
Those lines of code are pretty simple so this is likely to be a widespread bug. It specifically affects content made by Tumult Hype [https://tumult.com/hype/] and was originally reported by a user.