neon-animated-pages positioning. need help

[CragVFX]

Hi,

<div>

  <custom-elem-with-neon-pages></custom-elem-with-neon-pages>

  <div class="horizontal around-justified layout">

     <div>section left</div>

     <div>section right</div>

  </div>

</div>

Because of the following style within neon-animated-pages, I can't get the three containers to render correctly:

:host > ::content > * {

      position: absolute;

      top: 0;

      left: 0;

      bottom: 0;

      right: 0;

      height: 100%;

    }

I want the custom element on top then the two other regions below it and beside each other, but this renders them all at the top because of the absolute on neon-animated-pages. any ideas?

[CragVFX]

I still haven't figured this out, if you try to use neon-animated-pages in one component and have another div outside of that component that you want underneath it, the absolute positioning on the neon-animated-pages messes this up, any idea how I can fix it? Seems like position: absolute is needed for the animations to show properly.

[rodrigogon...@gmail.com]

I am struggling with this as well and waiting for community effort on the issue. See https://github.com/PolymerElements/neon-animation/issues/101 and also https://github.com/PolymerElements/iron-pages/issues/31

Have you found a solution to this?

Thanks

[Dan Schnau]

Can you post a plunker or a jsbin or whatever? Maybe if we isolate the problem we can figure it out.

[rodrigogon...@gmail.com]

The GitHub issues that I linked have jsbins illustrating them, as well as a bit of context. The problem is that pages inside the container get absolute positioning, thus taking them out of the normal page flow. Setting it to position static brings it back to the flow, but transitions get sloppy and ugly.

iron-pages: http://jsbin.com/novemeqaro/edit?html,output

neon-animated-pages: http://jsbin.com/xiwejixedo/edit?html,output