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

问题

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 'fixed'. Very luckily, I stumbled across the mentioning that -webkit-transform: translate3d(0, 0, 0) on the parent can make things go awry. I'm using bootstrap framework and so they indeed put this property on the .navbar-fixed-top class which one of parent elements had. Once I removed it the child started to position agains viewport. So I have two questions:

1. Why does -webkit-transform: translate3d(0, 0, 0) do these nasty things?
2. Why do bootstrap guys put this property for the .navbar-fixed-top class?

UPDATE
Well, it seems that I've found the answer to the second question. Here is the commit message:

Applied translate3d to modal, navbar-fixed and affix to combat browser repaint

Here is the answer to the second question:

Any computed value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants.

回答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

回答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)

来源：https://stackoverflow.com/questions/25824749/why-webkit-transform-translate3d0-0-0-messes-up-with-fixed-childs