App-header diferent scroll-target has jaggering animation #575
Description
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
- Open DevTools at the link provided above
- Enable Paint Flashing at More Tools > Rendering
- 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.