Programmatically calling show() on a hidden submenu puts it in a buggy state

[theefer]

Description

Programmatically expanding (show()) a hidden submenu puts it in a buggy state, where opened is true but the CSS height is 0px.

This is due to a bug in the animation code, and therefore only manifests if the submenu has animations turned on (which is the default).

Live Demo

http://jsbin.com/rutakeciri/edit?html,output

Steps to reproduce

1. Click on the button (calls show() on the closed iron-collapse nested under a closed top-level iron-collapse).
2. Click on the top-level iron-collapse.

Expected outcome

The top-level iron-collapse opens and reveals an open nested iron-collapse.

Actual outcome

The top-level iron-collapse opens and reveals an apparently closed nested iron-collapse. (In fact its opened is true but its height is 0.

Clicking on the nested iron-collapse seemingly does nothing (in fact it sets opened to false).

Clicking it again reveals it as expected.

This is due to the way the animation code tries to calculate the target height by setting the desired style and calling getBoundingClientRect. Unfortunately when the element is nested under a hidden parent menu (display: none), gBCR returns 0 as height.

Browsers Affected

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10

See #49 for a fix.

Note that I've encountered this issue when using paper-menu (which uses iron-collapse internally).