Re: Behavior of transform: rotate on <body> element.

Hi Vivek,

On Nov 24, 2013, at 6:00 AM, Vivek Galatage <vivekg@chromium.org> wrote:

> Hi,
> 
> I have come across the below situation in which we use "transform: rotate(180deg);" on the "<body>" element. http://jsbin.com/EQabAnE/2
> 
> The first half of the image shows the behavior of Chrome, Safari and IE with respect to the transformation. The other half depicts the behavior of FF and Opera(12) with the same transformation.
> 
> <Body transform- rotate.png>
> 
> Observe the area marked in red after the transformation. FF and Opera ignores the viewport height for the body and take the content height into consideration for the transform: rotate.
> Whereas chrome, safari takes the viewport height (box model height) for the transformation. Hence the behaviors are different. 
> IE(11) has a behavior in which flicker is observed and the content first behaves like chrome/safari, then again shows as FF/opera but finally settles down as the first half i.e. like chrome/safari.
> 
> Which behavior is correct one? 

The question is rather: What is the relevant box for calculating the transform origin of the rotation in the example. The origin is set by the ’transform-origin’ property and its initial value is ’50% 50%’. According to CSS Transforms [1], percentages are relative to the bounding box of an element. The bounding box of HTML elements is the border box of the element for CSS Transforms [2].

Tab is maybe right that the border box differs on WebKit/IE on <body> depending if you are in quirks mode or not. I didn’t check that myself.

> 
> 
> The other scenario is just the div being transformed with rotate. http://jsbin.com/evAMiZaF/2. In this all browsers behave more or less the same way in which the scrollbar is also transformed to appear on the left hand side.
> The same is not applicable to the body element. i.e. if the body content is scrollable, the scrollbar still remains at the right hand side. http://jsbin.com/IVIvEXa/1
>  
>  <CSS Transform scrollbars.png>
> 
> Should the scrollbars on body also behave the way div behaves after transformation i.e. showing the scrollbar also on the left?
> 
> Thoughts?

As said by Tab and Boris, the scroll bar in your example belongs to the viewport.

I hope this helps.

Greetings,
Dirk

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

Received on Monday, 2 December 2013 12:40:46 UTC