Fixed Positioning inside neon-pages

[zmoshansky]

How does one correctly set up fixed positioning inside a neon-animatable? I am trying to get a paper-fab to hover in the bottom right corner over a list but it only works correctly on page load; after an animation it disappears off the visible screen. However, if I toggle any css attribute on it or its parents in the dev inspector, the element appears correctly again. It feels like it just needs a hint to reflow or something.

I've tried toggling styles using js in the neon-animation-finish event to no avail.

Exert from custom element

<style>
    paper-fab {
      position: fixed;
      bottom: 30px;
      right: 30px;
    }
  </style>

  <template>
     <!-- list stuff; (enough to make the page scroll) --!>
      <paper-fab icon="add" elevation="3"></paper-fab>
   </template>

Page it's hosted on...

<neon-animated-pages id="main-pages-container" attr-for-selected="data-route" selected="[[route]]" entry-animation="slide-from-right-animation" exit-animation="slide-left-animation">
<neon-animatable data-route="foo">
   <custom-element></custom-element>
</neon-animatable>
</neon-animated-pages>

Update: Only happens on Google Chrome 43.0.2357.125 (Official Build) (64-bit). Firefox seems to work great. I assume the polyfills take care of it.

Update2: It also works on chrome if the page I'm coming from has enough content that it had a vertical scrollbar.

[masonlouchart]

Same trouble for me. Thanks @zmoshansky for the precise details.

Update: In my case, the FAB is not displayed if the page has a vertical scrollbar. I have to resize the page. Make a click or scrolling the list does nothing at all. (Chrome Version 43.0.2357.130 (64-bit) on Linux 14.04)

[masonlouchart]

I have found the cause of the child's style overwriting. In fact, if you remove the position property of the style rule "animated-page > *", the elements fixed are well displayed. But the coming page is not properly positioned until the previous page has completely disappeared.

neon-animated-pages.html:

<style>
...

:host > ::content > * {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100%;
}

...
</style>

I can figure out how keep the right position of the next page during the animation and solving the trouble with fixed element.

[zmoshansky]

By setting neon-animated-pages class="fit", I'm able to get the content on the page almost correctly.

I still have a problem where after the animation has finished my paper-fab suddenly jumps vertically by 56px; coincidently the height of the paper-header-panel. While the animation is playing, the positioning is correct.

[masonlouchart]

@zmoshansky Thank for the tip. I'll try it soon.

[CragVFX]

@LM450N @zmoshansky have either of you found a solution to this? The absolute positioning makes it very hard to position other elements if you have an element using neon-animated-pages. If I wanted another element directly below the top most element, which includes the neon-animated-pages, it overlaps. I would have to offset the bottom most element by a specific amount, which is not ideal nor dynamic. Just wondering if you guys got anywhere with this.

[zmoshansky]

@CragVFX My best solution to date is to use fit. I believe @LM450N has shown the root cause in https://github.com/PolymerElements/neon-animation/issues/31#issuecomment-119576505; which is probably the best place to start debugging. Best of luck!

[zmoshansky]

@LM450N @CragVFX I stumbled on a potential fix, at least for my original & current issue. My fab is now positioned correctly at the bottom of the screen, and doesn't jump to an incorrect position after the animation completes. It seems to work if I load or navigate to the page as well.

I still need class fit as I have an iron-list in several of the custom-elements and it needs some help with sizing.

Solution

Remove the neon-animatable tags and directly implementing the behaviour on my custom-elements as demonstrated below:

<neon-animatable data-route="foo">
   <custom-element data-route="foo"></custom-element>
</neon-animatable>

to

   <custom-element></custom-element>

and

    Polymer({
      is: 'custom-element',
      behaviors: [Polymer.NeonAnimatableBehavior],
...

[maxiplay]

It works correctly using fit but only surrounding neon-animated-pages with a div with relative css position

[masonlouchart]

I started to implement the behaviors into each custom components few months ago but I still had the problem. For now I switched on another project and I'm a little busy. I'll try the both solutions ASAP. Thank you guys. I'm staying tuned...