[css-break][css-transforms] transform on fragmented overflow

Hi,

The transform origin of an element is determined by its border box as per CSS Transforms [1]. With setting the transform property, the coordinate space of the element (and with it all descendants) is altered.

Lets assume the element is rotated and has overflowing content. The overflowing content gets rotated together with the element. The origin is still determined by the border box of the element.

Lets further assume the overflowing content is fragmented (fragmented over multiple columns on Multi-Column layout). How does the transform of the element effect the transform of the overflowing content on a different fragment?

http://jsfiddle.net/WLByL/ is a short example. (Hover over the cyan colored content to revers the transform.)

Chrome and Safari rotate the element as if there wasn’t a break in the next column. Meaning that most parts are rotated outside of the current column. As it would be if there was no break and the content continues underneath the element.

Firefox and IE break the overflowing content and redetermine the origin for the new fragment. The vertical origin is always set to ‘top’. The horizontal origin still depends on the specified origin of the element. The important part: the reference is not the border box of the element anymore but a reference box of the new fragment.

According to CSS Fragmentation, the behavior of Chrome and Safari is correct IMO. The results of Firefox and IE can be more pleasant though. Do we consider the behavior of Firefox and IE a bug?

Greetings,
Dirk

[1] http://dev.w3.org/csswg/css-transforms/#transform-origin-property


<div id="column">
    <div id="content">
        <div id="over"></div>
    </div>
</div>
<style>
#column {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
    width: 230px;
}
#over {
    margin: 0;
    height: 400px;
    background-color: cyan;
}
#content {
    width: 100px;
    height: 100px;
    border: solid lightgreen 5px;
    padding: 0;
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
}
#content:hover {
    -webkit-transform: rotate(0);
    transform: rotate(0);
}
</style>

Received on Tuesday, 31 December 2013 21:45:19 UTC