why -webkit-transform: translate3d(0, 0, 0) messes up with fixed childs

Question

I\'ve been trying for the last few hours to figure out how come a child element was positioning against its parent and not the screenport even though it\'s positioned as \'f

Answer 1

Regarding your first question:

You are using transforms. That's what's causing the problem.

Take a look at the spec: The Transform Rendering Model

Specifying a value other than ‘none’ for the ‘transform’ property establishes a new local coordinate system at the element that it is applied to.

So the element with fixed positioning will become relative to the element with the transform - not the viewport