1323233 - transform on parent causes fixed position child to be displayed as absolute

Status: RESOLVED INVALID

(Core :: Layout: Block and Inline, defect)

Description

[kthprog]

User Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.99 Safari/537.36

Steps to reproduce:

(1) Create HTML with an inner div and an outer div
(2) Set a scale transform on the outer div
(3) Set the inner div to position fixed and set the top and right properties
(4) The inner div is positioned absolutely inside the outer div, NOT FIXED-POSITION


Actual results:

The inner div is absolutely positioned inside the outer div
http://stackoverflow.com/questions/32153518/css-positionfixed-is-not-working/41123770#41123770


Expected results:

The inner div should be fix to the viewport

Comment 1

[Timothy Nikkel (:tnikkel)]

That's how fixed position inside transforms is spec'ed to work. When you apply a transform to an element is becomes a fixed position containing block.

Comment 2

[kthprog]

Can you link me to the spec that says this? I can't find any evidence that fixed position elements should ever not be fixed position other than when a float is applied. 

Your explanation is not clear to me. The outer div is already fixed position in the example, however the inner div is not when it should be. Are you saying that because the outer div becomes a "containing block" when the transform is applied that the inner div should become absolutely positioned? I can't find any evidence that this is how absolute positioning works. It's always relative to the viewport.

Comment 3

[kthprog]

It seems like Chrome is taking this up, so I'm guessing you did not understand the issue.
https://bugs.chromium.org/p/chromium/issues/detail?id=673808

Comment 4

[kthprog]

fixed position* in my above comment. Oops.

Comment 5

[Timothy Nikkel (:tnikkel)]

(In reply to kthprog from comment #2)
> Can you link me to the spec that says this? I can't find any evidence that
> fixed position elements should ever not be fixed position other than when a
> float is applied.

From https://www.w3.org/TR/css-transforms-1/#transform-rendering

"For elements whose layout is governed by the CSS box model, any 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."

> Your explanation is not clear to me. The outer div is already fixed position
> in the example, however the inner div is not when it should be. Are you
> saying that because the outer div becomes a "containing block" when the
> transform is applied that the inner div should become absolutely positioned?

The outer div becomes a containing block for fixed position items yes. That means that any element with position fixed that is a descendant of it will be absolutely positioned with respect to the outer div.

If you google "fixed position transform" you'll see a litany of people who've run into this before.

Comment 6

[kthprog]

Very interesting! I have a lot of respect for Mozilla developers now lol. So I guess I shouldn't be surprised it works in IE they never do anything right. Thanks!