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

Answer 2

I used this "hackery"(-webkit-transform: translate3d(0, 0, 0)) to fix glitches from transform scale (some elements where moving as I was interacting with the page ) but I had an issue with position fixed on webkit(I couldn't set focus on fixed positioned text inputs) and when I removed it it was fixed.As I was using transform scale only on firefox there was no problem for me to remove it(On webkit I ended up using zoom which acts much better than transform:scale(but -webkit-transform: translate3d(0, 0, 0) was left there from legacy css) and I hope that firefox supported zoom as well)