scroll lag after opening and closing calendar (or any other overlay like autocomplete)

[fxck]

See https://youtu.be/1VE5vHXnL84

It feels as if something is not properly cleaned up.

The popover component I'm using is https://github.com/ncstate-sat/popover and is internally using overlay as well.

Also worth noting is that it happens with or without dev tools open and nothing seems out of the ordinary in the performance and rendering tab.

I'll try to make a repro later today.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

6.4.0 material, 6.0.9 angular

[fxck]

https://stackblitz.com/edit/material-scroll-lag-9qzbai?file=app%2Fsimple-example%2Fsimple-example.component.ts

could not replicate it, any ideas? I mean if it was for the sheer amount of components it contains, it wouldn't just start behaving like this after opening component with an overlay, right..

[crisbeto]

Maybe this is happening as a result of a combination of components? It might be easier to see what's going on by doing a recording in the "Performance" tab.

[crisbeto]

One more thing to try: once you've opened it a few times and it starts lagging, can you try finding the cdk-overlay-container in the DOM and adding a display: none to it, and seeing if the lag goes away?

[fxck]

One more thing to try: once you've opened it a few times and it starts lagging, can you try finding the cdk-overlay-container in the DOM and adding a display: none to it, and seeing if the lag goes away?

Can't, it would hide the popover as well.

[crisbeto]

It's a bit more work, but you should be able to hide the cdk-overlay-connected-position-bounding-box for the closed overlays.

[fxck]

Ok, that did fix the lag.

[crisbeto]

Cool, thanks for checking. In that case we should move the detached overlays out of the DOM completely.

[fxck]

I still can't quite understand why is it happening, that cdk-overlay-connected-position-bounding-box seems harmless..

[crisbeto]

It's because, even though they're transparent and unclickable, the elements are still being rendered over the page. Since they're position: fixed, they have to be redrawn while you're scrolling.