layout and behavior broken in flexbox environments

[timove]

Description

In certain flexbox environments iron-collapse fails to visually collapse itself and to report transitionend events. The flex character suppresses the height changes visually.

Expected outcome

Visually collapsing iron-collapse and fired transitionend events.

Actual outcome

No animation visible, content remains visible, no transitionend events.

Live Demo

Steps to reproduce

See failing test in timove@eec525b

Browsers Affected

Verified for, otherwise untested:

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

[valdrinkoshi]

Could not reproduce, the events are correctly fired: here http://jsbin.com/mecaha/1/edit?html,console,output
In those tests you have the iron-collapse already opened, hence you should not see any animation. If the status is toggled after the collapse gets attached, you should see the animation.
Closing for now, will reopen if the problem persists. A jsbin showing the issue would be much appreciated 👍

[timove]

In your jsbin, the iron-flex-layout classes "layout, vertical" do not get applied to the container surrounding the iron-collapse. Here is a fixed version: http://jsbin.com/xudawucomo/1/edit?html,console,output
I added a red background to illustrate the issue. transitionend does not fire every 2nd time toggle is clicked. Can you confirm this?

[valdrinkoshi]

@timove yes i confirm that transitionend doesn't get fired when iron-collapse is opened.
For your use case, I would rather suggest to wrap the iron-collapse with another div and make it flex, like this http://jsbin.com/gipaceruci/edit?html,output
WDYT?

[timove]

@valdrinkoshi Unfortunately, in my use case this does not work. I cannot tell why, yet. I have nested iron-collapse elements which show really awkward behaviors without my proposed fixed. --- Do you see problems applying the fix?

[valdrinkoshi]

Oh, I forgot reopening the issue sorry!
Will review your PR & see if this is a breaking change or not 😉

[valdrinkoshi]

Fixed by #53 and released in v1.1.0