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.
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
[x] 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.
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
htmlroot 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
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
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-headerto use pseudo elements (especially#backgroundFrontLayerand#backgroundRearLayer) and it seems to work.