21

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.

Max Koretskyi
  • 101,079
  • 60
  • 333
  • 488

3 Answers3

13

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

Danield
  • 121,619
  • 37
  • 226
  • 255
1

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)

Andreas
  • 970
  • 18
  • 28
1

According to mdn documentation fixed position is removed from normal document flow and attached to containing block.

The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), or the will-change property is set to transform, in which case that ancestor behaves as the containing block.

Element containing block regarding mdn documentation is:

  • if element position is fixed containing block is initial containing block that has viewport dimensions.
  • Or containing block can be set by specific css properties transform, perspective, will-change, filter, contain, backdrop-filter in this case element is positioned regarding specified element

in this case transform property mentioned in question creates containing block by which fixed element is positioned.

Nerius Jok
  • 3,059
  • 6
  • 21
  • 27