0

I took the polymer demo messages example, put it into a jsbin and then edited it to pull out the list and fab into a separate polymer element. In other words pretending that we wanted to make the inbox editor a reusable component. This more closely resembles my application, as I have broken it into many such components to make it more modular (one of the great benefits of web components IMO).

As the fab is part of this new element then leaving it position absolute puts it at the very bottom off the list rather than always bottom right of the window.

To fix that I simply changed it to position fixed. See this jsbin

It loads fine but when you start scrolling (in latest chrome) the fab scrolls with the list content, instead of remaining fixed at the bottom right.

Interestingly if you click the mouse on the bottom right of the window (where the fab should have been) the fab jumps down to the right place. Now when you scroll it remains in the correct position.

Very strange. Any ideas of the cause and whether I am doing something wrong or it is a polymer bug?

Anders
  • 1,337
  • 1
  • 8
  • 17

1 Answers1

1

After a quick googling around I found that adding -webkit-transform: translateZ(0); to paper-fab element fixes it to the viewport.

Working jsbin

Related question: position:fixed not working in Google Chrome

I have no idea why this happens, the only vaguely relevant bug that I found is https://code.google.com/p/chromium/issues/detail?id=420534 but it's the other way round: it's about transform: translateZ(0); on parent element that makes its children scrolling and not fixed.

Community
  • 1
  • 1
artem
  • 46,476
  • 8
  • 74
  • 78
  • Great thanks a lot for your help. I have no idea what it means but it certainly seems to have fixed the problem ;-) – Anders Jan 28 '15 at 08:25