1078162 - TranslateZ makes all children relative to transformed element, not the viewport

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[anders]

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

Steps to reproduce:

make two nested divs, #parent and #child.
make #child to have position: fixed, top, right, bottom, left: 0;

#child now takes up the whole viewport, regardless of size of #parent.

Add transform: translateZ(0); to #parent. #child is now sized relative to #parent and not viewport.

Example: 
http://jsfiddle.net/pjcgan9o/2/


Actual results:

Child is suddenly relative to it's parent


Expected results:

Child with position:fixed should always be relative to viewport.

Comment 1

[Paul Rouget [:paul]]

http://www.w3.org/TR/css3-transforms/#transform-rendering -> "Specifying a value other than none for the transform property establishes a new local coordinate system at the element that it is applied to"

Same behavior with webkit/blink.

Comment 2

[anders]

Currently this is an issue in the spec: http://www.w3.org/TR/css3-transforms/#issue-ca2c412c

Comment 3

[Boris Zbarsky [:bzbarsky]]

If the spec changes, we'll change our behavior, but at the moment we're following the spec.