App-header display none

[JessedeRuijter]

Description

If the app-header is initialized while having display: "none", it won't work properly when it's display is set later. This also means that having two app-headers on different pages in an iron-pages or neon-animated-pages will result in one of the two not working properly (the one which was on the hidden page while opening the app).

Expected outcome

The toolbar resizes, scroll-effects like waterfall etc. show as usual.

Actual outcome

No animations are shown, the toolbar doesn't resize as intended.

Live Demo

Will add later.

Steps to reproduce

1. Create a page with an app-header which is initially hidden.
2. After the page has finished loading, show the app-header. 3.It won't work properly.

Browsers Affected

• [x] Chrome
• [ ] Firefox
• [ ] Safari 9
• [ ] Safari 8
• [ ] Safari 7
• [ ] Edge
• [ ] IE 11
• [ ] IE 10

[blasten]

If the header isn't render, you can notify visibility change by implementing iron-resizable-behavior or calling resetLayout on the app-header manually. iron-pages implements that behavior, so it should just work (http://jsbin.com/beguna/edit?html,output) neon-animated-pages also implements that behavior, but the resize event fires at the end of the animation which I agree it isn't desirable.

[tktr]

Calling resetLayout on the app-header after changing the display property seems to work only when switching e.g. to display: "inline" but the height of the header remains occupied when setting display: "none" again.

Demo

https://jsbin.com/fodiqabosi/edit?html,output

[keanulee]

@tktr You'll need to call resetLayout on <app-header-layout>, since that's what is positioning and adding the margin to the content after the header.

[rwestlund]

This just bit me as well. Needing to call resetLayout() manually was not expected behavior. At the very least, there should be a note about this in the documentation.