770109 - When -moz-transform overflows, can't scroll to see the whole content

Status: RESOLVED DUPLICATE of bug 6976

(Core :: General, defect)

Description

[Siavash]

I was scaling an image using -moz-transform when I noticed this issue. When the image got bigger than window, I could not see the top and left of the image, I just could scroll down or right. So when I set -moz-transform-origin to "0 0" I can see the whole image, but I don't want to use that origin.

It seems that this happens in all browsers.

I wrote some simple code to demonstrate it (I used "scale", but I think other functions have this problem too):
http://dabblet.com/gist/3032001

Here you can see 4 Divs:
In the first box: Number "2" is scaled, but you can't scroll to see the whole number.

Second box: Same as the first box, but it has "text-align: right;". Now, you can scroll right to see the whole number.

Third box: Same as the second box, but the Number "2" has a bigger scale number. Now you can't see the top of the number and you can only scroll down.

Fourth box: Same as the third box, but it's left-aligned and has "transform-origin: 0 0".

From http://dev.w3.org/csswg/css3-transforms/ :
"In the HTML namespace, the transform property does not affect the flow of the content surrounding the transformed element. However, the extent of the overflow area takes into account transformed elements. This behavior is similar to what happens when elements are offset via relative positioning. Therefore, if the value of the ‘overflow’ property is ‘scroll’ or ‘auto’, scrollbars will appear as needed to see content that is transformed outside the visible area."

Comment 1

[Boris Zbarsky [:bzbarsky]]

This is no different from content sticking out the left or top of the viewport due to width settings or relative or absolute positioning.

Turns out, websites depend on this behavior....