Open zmoshansky opened 9 years ago
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)
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.
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.
@zmoshansky Thank for the tip. I'll try it soon.
@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.
@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!
@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.
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],
...
It works correctly using fit but only surrounding neon-animated-pages with a div with relative css position
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...
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
Page it's hosted on...
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.