mwc-top-app-bar disappears in a lazy-loaded page

[govis]

Describe the bug mwc-top-app-bar does not appear to initialize properly in a page that's initially display: none; and later becomes visible upon navigation to it. In such case topAppBarHeight_ property is set to 0 causing it to disappear when page starts scrolling

To Reproduce Steps to reproduce the behavior:

1. Go to https://typescript-sanmxq.stackblitz.io/
2. Click on 'Add item' until vertical scroll bar appears
3. Scroll down less then the height of the app bar
4. See the app bar disappear

Expected behavior App bar is partially visible

Screenshots Actual:

Expected:

Browser Version (please complete the following information):

• OS: Windows 10
• Browser chrome
• Version 83.0.4103.116

Additional context topAppBarHeight_ is set to 0 in MDCTopAppBarFoundation function currentAppBarOffsetTop_ is then set to -topAppBarHeight_(96) in MDCTopAppBarFoundation.handleTargetScroll function, which causes it to collapse completely when it should still be visible

[dfreedm]

Yep, there are a few components that need to measure on render to layout correctly, or you get this. We usually have a layout() method on the component for you to call when you make the container visibile, but I may need to add one. Either way, I'll make sure to add this to the docs!

[govis]

There's no layout() method in the mwc-top-app-bar. Is there any other way to fix it?

[asyncLiz]

Obsolete with M3