Polymer paper factory with position: fixed strange behavior when used with main list that has scrollTarget

Question

I took an example of demo messages , put it in jsbin, and then edited it to pull out the list and split it into a separate polymer element. In other words, pretending we want to make the mailbox editor a reusable component. This is more similar to my application, as I have broken it down into many such components to make it more modular (one of the big advantages of IMO web components).

Since Fab is part of this new element, leaving its absolute position places it in the lowest corner of the list, and not always to the right of the window.

To fix this, I just changed it to a fixed position. See this jsbin

It loads fine, but when you start scrolling (in the last chrome), you scroll through the lines with the contents of the list, and do not remain fixed in the lower right corner.

Interestingly, if you click the mouse in the lower right corner of the window (where the factory was supposed to be), fab jumps down to the right place. Now, when you scroll it, it remains in the correct position.

Very strange. Any ideas about the reason and am I doing something wrong or is it a polymer mistake?

Answer 1

After a quick google search, I found that adding -webkit-transform: translateZ(0); into the paper-fab element captures it in the viewport.

Working jsbin

Related question: position: fixed does not work in Google Chrome

I have no idea why this is happening, the only vaguely relevant error I found is https://code.google.com/p/chromium/issues/detail?id=420534 , but it's the other way around: it's near transform: translateZ(0); on the parent element, which causes it to scroll and not lock its children.