Body element has incorrect size for transform:scale(<1) children




6 years ago
6 years ago


(Reporter: etlovett2, Unassigned)


19 Branch
Mac OS X

Firefox Tracking Flags

(Not tracked)



(2 attachments)



6 years ago
Created attachment 714157 [details]
Simplified test case

Open the attached test case page. The browser correctly sizes the body element when the scaled-up div is shown (and when a non-scaled div is shown, though that's not included) but it does not properly size the body element when the scaled-down div is shown. In that case, the body element should be ~1024px in height, but it's 2026px. This results in a bunch of extra whitespace at the bottom of the page.

Bug occurs in:
* Firefox Beta (19.0)
* WebKit nightly (Version 6.0.2 (7536.26.17, 537+))
* Chrome Canary (Version 27.0.1412.0 canary)

Filed against WebKit as

Only tested on OS X 10.7.5.

Comment 1

6 years ago
This bug occurs in the latest Firefox Nightly as well (21.0a1 (2013-02-14)).
Attachment #714157 - Attachment mime type: text/plain → text/html
From the transforms spec:

   For elements whose layout is governed by the CSS box model, the transform property does
   not affect the flow of the content surrounding the transformed element.

In particular, the height of the body does not depend on the transform.  You can see that if you set a border on the body in the testcase.

So the observed behavior is exactly what the spec calls for.
Last Resolved: 6 years ago
Resolution: --- → INVALID

Comment 3

6 years ago
Created attachment 714224 [details]
Test case, with body height:100% addition.

Comment 4

6 years ago
Ah, ok.  I thought that might be the case, since it occurs in WebKit as well.

Interestingly, if you add height:100% to the body tag in this test case, it sizes correctly.  See "Test case, with body height:100% addition" attachment.
Attachment #714224 - Attachment mime type: text/plain → text/html
You need to log in before you can comment on or make changes to this bug.