HTML Scaling incorrectly changes HTML elements positions

RESOLVED INVALID

Status

()

Core
Layout
RESOLVED INVALID
6 years ago
6 years ago

People

(Reporter: Julien Carnec, Unassigned)

Tracking

10 Branch
x86_64
Windows 7
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(2 attachments)

(Reporter)

Description

6 years ago
Created attachment 629165 [details]
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.
(Reporter)

Comment 1

6 years ago
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

6 years ago
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

6 years ago
Created attachment 629395 [details]
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.

Updated

6 years ago
Attachment #629395 - Attachment mime type: text/plain → text/html

Updated

6 years ago
Component: Untriaged → DOM
Product: Firefox → Core
QA Contact: untriaged → general
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.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 6 years ago
Component: DOM → Layout
QA Contact: general → layout
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.