[MDCTopAppBar] The Top App Bar Disappears When Initialized Inside a Hidden Container.

[iMrDJAi]

Bug report

When you render the top app bar inside a hidden container (display: none;), then you show that container again (display: block;), it disappears after scrolling. I'm using multiple routes inside my app, but instead of removing one to show another I simply hide it using CSS, this prevents an extra loading time caused by navigation.

Steps to reproduce

1. Render a top app bar inside a container with "display: none;".
2. Show that container again by changing "display: none;" to "display: block;".
3. Scroll down.
4. See error.

Actual behavior

The top app bar disappears.

Expected behavior

The top app bar should work properly when scrolling.

Screenshots

A video.

Your Environment:

Software	Version(s)
MDC Web	7.0.0
Browser	Opera GX
Operating System	Windows 10

Additional context

@asyncLiz said on Disocrd:

This is likely a problem with adapter.getTopAppBarHeight() since that will report "0" when the app bar is hidden. It looks like this is performed inside the constructor.

Typically for these situations, we have a layout() method in the component that we call to re-initialize these sort of properties when the layout changes, such as when going from a hidden state to visible state. That's something that could be added to support this use case.

[siwon9898]

did you solve this problem? I think that would work by simply adding "position:fixed"

[iMrDJAi]

did you solve this problem? I think that would work by simply adding "position:fixed"

@siwon9898 No, I hadn't, I just reported the issue and stopped trying with it.

[pogorv12]

I can confirm the issue. Thanks for pointing it out!

Behavior is the same even if "position: fixed" used with hidden attribute for the container.

As far as I use dummy screen for loading I overcome the issue just by using higher Z-index for the dummy with no hidden attribute for other app screens. Then I apply "hidden" attribute to non-required screens after when top-app-bars are initialized and it works well then.

@devteam: if this is not a bug but a feature it will be nice to have a note in the description.