[css-transforms] How should scrollbars react to a scaled-down element?

Take the following example <http://jsfiddle.net/3ht8r9pn/1/>:

<div class='outer'>
    <div class='inner'></div>
</div>
<style>
.outer {
    width: 200px;
    height: 200px;
    background-color: #eee;
    overflow: auto;
}
.inner {
    width: 400px;
    height: 400px;
    transform: scale(0.25);
    transform-origin: 0 0 0;
    background-color: red;
}
</style>

In both Chrome and Firefox, .outer spawns scrollbars as if it
contained 400px worth of content.  However, the Transforms spec says:

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

This suggests that the element should affect scrollbars as if it's
100x100, its visible post-transform size.

I presume that the spec should be corrected to say that the effects of
the transform must be taken into account *in addition to* the
original, pre-transform, geometry.  Correct?

~TJ

Received on Wednesday, 7 October 2015 21:56:55 UTC