Ok, one detail to add: the background gradient is semi-transparent.
This means:
- even with the App covering the whole body, the browser has to draw and combine both, the <body> and the App background. This is only an initial issue, though, as both don't move with respect to each other.
- just adding the same body background to the scroll container div (as I proposed above) will not avoid the issue: the fixed background still shines through and needs to be painted. Instead, the gradient needs to be modified to colors with no alpha value.
However, testing in the Chrome developer tools shows that not even this, or even setting a solid background color avoids the complete repaint!
I removed all other background gradients then (body+App), then the repaint time decreased significantly (maybe a third of the 60 fps mark -> 180fps).
Then I added the gradient to the body again (note: this gradient is fully covered! it cannot be seen!) - and the performance dropped to close to the 60 fps mark again.
So it looks like even invisible gradients impact the redraw performance of Chrome.
That's new to me and certainly a surprise. And needs to be considered...