App-header diferent scroll-target has jaggering animation

[KevinAsher]

Description

When using the app-layout with background-image and scroll effects, there is a performance hit if the scroll target of the app-header is not the html root element. Apparently the background image is getting repainted at every frame render.

Expected outcome

Animation of the header should run without jaggering.

Actual outcome

Animation of the header lags behind the scroll of the page.

Live Demo

https://stackblitz.com/edit/owwd62

Steps to reproduce

1. Open DevTools at the link provided above
2. Enable Paint Flashing at More Tools > Rendering
3. Scroll the page, notice the green area constantly flashing (repaints)

It's hard to see the jaggering even with CPU throttling on the Devtools, but on mobile devices it becomes clear, for example, we saw quite some lag on a Moto G6.

Browsers Affected

• Chrome
• Not tested in other browsers

Proposed Solution

At this blog post, the author's solution seems to work, I've made some local changes in the css of the app-header to use pseudo elements (especially #backgroundFrontLayer and #backgroundRearLayer) and it seems to work.