W3C home > Mailing lists > Public > www-style@w3.org > December 2013

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

From: Vivek Galatage <vivekg@chromium.org>
Date: Mon, 2 Dec 2013 20:06:23 +0530
Message-ID: <CA+ycFOx+u5-BTO+60OubH0_q4PwKytfusLsFoZdUr+4Wo81KzA@mail.gmail.com>
To: Dirk Schulze <dschulze@adobe.com>
Cc: www-style@w3.org
That's great information Dirk, thanks for that. It really helps to
understand the internal details and about the quirks mode differences.
On Dec 2, 2013 6:10 PM, "Dirk Schulze" <dschulze@adobe.com> wrote:

> 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 14:36:55 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:17 UTC