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

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[etlovett2]

Attachment: 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 https://bugs.webkit.org/show_bug.cgi?id=109873.

Only tested on OS X 10.7.5.

Comment 1

[etlovett2]

This bug occurs in the latest Firefox Nightly as well (21.0a1 (2013-02-14)).

Comment 2

[Boris Zbarsky [:bzbarsky]]

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.

Comment 3

[etlovett2]

Attachment: Test case, with body height:100% addition.

Comment 4

[etlovett2]

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.