- From: Vivek Galatage <vivekg@chromium.org>
- Date: Mon, 2 Dec 2013 20:06:23 +0530
- To: Dirk Schulze <dschulze@adobe.com>
- Cc: www-style@w3.org
- Message-ID: <CA+ycFOx+u5-BTO+60OubH0_q4PwKytfusLsFoZdUr+4Wo81KzA@mail.gmail.com>
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