Screen tearing during fast scrolling when background gradient is applied

[malbaugh]

When scrolling quickly, the background gradient would appear to "tear" slightly. Notably, this is more pronounced in browsers with GPU acceleration turned off.

The following snippets are from a browser with GPU acceleration enabled:

gpu-tearing.mov

Freeze frame:

Steps to Reproduce:

1. Optional: turn off GPU acceleration to exaggerate the issue.
2. Open a page with a large amount of scrollable content and a background gradient applied to the body.
3. Use a trackpad or fast scroll wheel to scroll quickly.
4. Observe how the background gradient appear to tear during fast scroll.

Expected Behavior:
The background gradient should move smoothly in sync with the scroll position, with no visible tearing or lag, even during fast scrolling.

Actual Behavior:
During rapid scrolling, the gradient's position appears to update out of sync with the content, causing a visible "tear" or stutter effect.

Environment:
I have reproduced this bug on my laptop, phone and desktop.

Browsers: Chrome, Safari, Firefox
OS: macOS, IOS

Root Cause:
The root cause seems related to how the gradient is painted and composited during scrolling. I am working on a fix.