760421 - HTML Scaling incorrectly changes HTML elements positions

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[Julien Carnec]

Attachment: HTML_Scaling_incorrectly_changes_HTML_elements_positions.zip

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:10.0.4) Gecko/20100101 Firefox/10.0.4
Build ID: 20120420145309

Steps to reproduce:

I have an HTML page with a fixed header and below a vertically scrollable list. The fixed header should remain on top, independently of the scroll position.
It is actually what I get when I don't set any HTML transformation to the body tag of my webpage



Actual results:

If I set an HTML scaling of factor '1' to the body tag CSS style (-moz-transform: scale (1); ) the header is shifted down and becomes scrollable.


Expected results:

As far as a scale transformation of factor 1 is equivalent to an identity transformation, the appearance and behavior of my webpage header should not be modified and the webpage should appear identically as if I did not set any transformation
Furthermore, any scaling factor also shifts down the header and makes it scrollable, which is not what is expected.

The sample attached reproduces this issue. Simply open bug.html and you will see.

Comment 1

[Julien Carnec]

I have also registered this issue at Google Chrome because I also reproduce the same incorrect behavior on Chrome using -webkit-transform instead of -moz-transform:
http://code.google.com/p/chromium/issues/detail?id=130741

Comment 2

[mjh563]

I think this may be correct actually. According to

http://dev.w3.org/csswg/css3-transforms/

"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."

In other words, after applying a transform to the body (even if it's an identity transform), the containing block for the fixed header changes from being the viewport (window) to being the body.

So instead of being fixed to the top of the window, the header gets fixed to the top of the body instead (which is why it scrolls).

The reason it moves down is because the first non-fixed element in the body (the div) has a top margin. This margin seems to be ignored when calculating the position for top:0. I don't know if that's correct or not.

Comment 3

[mjh563]

Attachment: Simplified version of reporter's example

The attached testcase (based on the reporter's sample) has '-moz-transform: scale(1.0)' set on the body. This causes the 'position:fixed' header to scroll when you scroll the document.

Comment 4

[Boris Zbarsky [:bzbarsky]]

Yep.  This is exactly what the spec requires, and is the reason Chrome has the same behavior.  And yes, an identity transform has different behavior from no transform, so you don't get weird effects when transforms pass through the identity.

The problem, by the way, is that in general once you apply transforms position:fixed behavior becomes nonsensical.  It's not too bad for scaling, but for a translate or worse yet rotate transform there's just no way to make it work.  So the spec just says that transforms convert fixed positioning into absolute positioning relative to the transformed object.