Behavior of CSS transform: rotate on <body> element
638 views
Skip to first unread message
Vivek Galatage
Nov 22, 2013, 11:56:46 AM11/22/13
to blink-dev
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.
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 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
Should the scrollbars on body also behave the way div behaves after transformation i.e. showing the scrollbar also on the left?
Thoughts?
Many thanks,
Vivek
Alexei Filippov
Nov 22, 2013, 12:40:43 PM11/22/13
to Vivek Galatage, blink-dev
Hi Vivek,
My $.02
The answer to the latter question (the rotated body scrollbar) relates to where would you expect it to be when you rotate by 1deg, 89deg, 91deg...
I would be surprised if it jumps to the other side at some point.
Another interesting matter is how should wheel scrolling behave. Personally I don't feel a dissonance while scrolling a rotated div with a mouse wheel.
However tap and drag on my mobile feels really unnatural for a rotated div.
Cheers,
Alexei
Eric Seidel
Nov 22, 2013, 1:41:14 PM11/22/13
to Vivek Galatage, blink-dev
On Fri, Nov 22, 2013 at 8:56 AM, Vivek Galatage <viv...@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/2The 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.
This looks a bit like quirks mode vs. not. In one of the two the <body> element expands to the size of the viewport. In the other, it just expands to encapsulate content.
I would use the inspector to see how tall it thinks the <body> is in your two tests.
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?
I would expect the whole element to rotate, so it just depends on how tall it is.
Similar to:
<div style='height: 200px'>Foo</div>
You would expect Foo to be upside down 200px down the page, not just upside down at the top of the page.
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/1Should the scrollbars on body also behave the way div behaves after transformation i.e. showing the scrollbar also on the left?
Nope. Top level scrollbars are not part of the body. Maybe they're part of <html> spec-wise? But I doubt it. If you added scrollbars to the body via: "overflow: scroll" you might expect this... but I supect that that might be special cased to apply to the viewport scrollbars anyway.
When you're transforming some arbitrary div with "overflow: scroll", there the scrollbars *are* part of that div, and so of course they should get transformed.
We'd have to check the CSS spec to be sure exactly where scrollbars are defined, but I'm pretty sure they're outside of both the <body> and <html>. It's sort like if you were viewing a PDF and rotated the PDF, you wouldn't expect the outermost scrollbars to rotate.
Thoughts?Many thanks,Vivek
Ravi Kasibhatla
Nov 22, 2013, 2:15:15 PM11/22/13
to Eric Seidel, Vivek Galatage, blink-dev
On Sat, Nov 23, 2013 at 12:11 AM, Eric Seidel <ese...@chromium.org> wrote:
On Fri, Nov 22, 2013 at 8:56 AM, Vivek Galatage <viv...@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/2The 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.
This looks a bit like quirks mode vs. not. In one of the two the <body> element expands to the size of the viewport. In the other, it just expands to encapsulate content.I would use the inspector to see how tall it thinks the <body> is in your two tests.
We did verify the body length using the inspector. In case of chrome, it was the size of viewport (excl. the top widget area), but in case of firefox the body length was equivalent to the content size (much less than the viewport size). This different behavior raised this question. :). What should be taken as body height, when not specified.
My personal understanding - when not specified explicitly, it should be equal to viewport size.
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?I would expect the whole element to rotate, so it just depends on how tall it is.Similar to:
<div style='height: 200px'>Foo</div>You would expect Foo to be upside down 200px down the page, not just upside down at the top of the page.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/1Should the scrollbars on body also behave the way div behaves after transformation i.e. showing the scrollbar also on the left?Nope. Top level scrollbars are not part of the body. Maybe they're part of <html> spec-wise? But I doubt it. If you added scrollbars to the body via: "overflow: scroll" you might expect this... but I supect that that might be special cased to apply to the viewport scrollbars anyway.
We did experiment even by adding "overflow: scroll" to the <body> and though it added the scrollbars, but the scrollbars were not transformed to the other side after rotation (unlike div for which the scrollbars moved to opposite side after rotation). This raised the question - are the main scrollbars always outside html/body - even when defined by overflow:scroll.
When you're transforming some arbitrary div with "overflow: scroll", there the scrollbars *are* part of that div, and so of course they should get transformed.We'd have to check the CSS spec to be sure exactly where scrollbars are defined, but I'm pretty sure they're outside of both the <body> and <html>. It's sort like if you were viewing a PDF and rotated the PDF, you wouldn't expect the outermost scrollbars to rotate.
Thoughts?Many thanks,VivekTo unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
Eric Seidel
Nov 22, 2013, 3:07:57 PM11/22/13
to Ravi Kasibhatla, Vivek Galatage, blink-dev
On Fri, Nov 22, 2013 at 11:15 AM, Ravi Kasibhatla <kasibha...@gmail.com> wrote:
On Sat, Nov 23, 2013 at 12:11 AM, Eric Seidel <ese...@chromium.org> wrote:
On Fri, Nov 22, 2013 at 8:56 AM, Vivek Galatage <viv...@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/2The 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.
This looks a bit like quirks mode vs. not. In one of the two the <body> element expands to the size of the viewport. In the other, it just expands to encapsulate content.I would use the inspector to see how tall it thinks the <body> is in your two tests.We did verify the body length using the inspector. In case of chrome, it was the size of viewport (excl. the top widget area), but in case of firefox the body length was equivalent to the content size (much less than the viewport size). This different behavior raised this question. :). What should be taken as body height, when not specified.My personal understanding - when not specified explicitly, it should be equal to viewport size.
If true, this is a bug. I would expect document.body.clientHeight or getComputedStyle(document.body).height to show this difference and this to be a bad compat bug.
This reminds me of: https://bugs.webkit.org/show_bug.cgi?id=96426
I can't find the CSS or HTML spec reference about when <body> and <html> are supposed to expand to the height of the viewport or not.
This bug also looks related: https://code.google.com/p/chromium/issues/detail?id=266925
I just wish I could find the spec which covers this quirk.
Dirk Schulze
Nov 23, 2013, 1:50:24 AM11/23/13
to Ravi Kasibhatla, Eric Seidel, Vivek Galatage, blink-dev
It would be very beneficial for everyone if you could wend the original mail to the CSS WG mailing list. This way it is easier for other parties to contribute to the discussion and more visual as well.
The mailing list is: www-...@w3.org
Thanks a lot!
Greetings,
Dirk
On Nov 22, 2013, at 8:15 PM, Ravi Kasibhatla <kasibha...@gmail.com> wrote:
> On Sat, Nov 23, 2013 at 12:11 AM, Eric Seidel <ese...@chromium.org> wrote:
>
>
>
> On Fri, Nov 22, 2013 at 8:56 AM, Vivek Galatage <viv...@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>
The mailing list is: www-...@w3.org
Thanks a lot!
Greetings,
Dirk
On Nov 22, 2013, at 8:15 PM, Ravi Kasibhatla <kasibha...@gmail.com> wrote:
> On Sat, Nov 23, 2013 at 12:11 AM, Eric Seidel <ese...@chromium.org> wrote:
>
>
>
> On Fri, Nov 22, 2013 at 8:56 AM, Vivek Galatage <viv...@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.
>
>
>
> This looks a bit like quirks mode vs. not. In one of the two the <body> element expands to the size of the viewport. In the other, it just expands to encapsulate content.
>
> I would use the inspector to see how tall it thinks the <body> is in your two tests.
> We did verify the body length using the inspector. In case of chrome, it was the size of viewport (excl. the top widget area), but in case of firefox the body length was equivalent to the content size (much less than the viewport size). This different behavior raised this question. :). What should be taken as body height, when not specified.
> My personal understanding - when not specified explicitly, it should be equal to viewport size.
>
> 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?
>
> I would expect the whole element to rotate, so it just depends on how tall it is.
>
> Similar to:
>
> <div style='height: 200px'>Foo</div>
>
> You would expect Foo to be upside down 200px down the page, not just upside down at the top of the page.
>
>
> 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>
>
> This looks a bit like quirks mode vs. not. In one of the two the <body> element expands to the size of the viewport. In the other, it just expands to encapsulate content.
>
> I would use the inspector to see how tall it thinks the <body> is in your two tests.
> We did verify the body length using the inspector. In case of chrome, it was the size of viewport (excl. the top widget area), but in case of firefox the body length was equivalent to the content size (much less than the viewport size). This different behavior raised this question. :). What should be taken as body height, when not specified.
> My personal understanding - when not specified explicitly, it should be equal to viewport size.
>
> 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?
>
> I would expect the whole element to rotate, so it just depends on how tall it is.
>
> Similar to:
>
> <div style='height: 200px'>Foo</div>
>
> You would expect Foo to be upside down 200px down the page, not just upside down at the top of the page.
>
>
> 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
>
Vivek Galatage
Nov 24, 2013, 9:55:34 PM11/24/13
to Dirk Schulze, Ravi Kasibhatla, Eric Seidel, blink-dev
Thanks Dirk, I have moved the discussion to: http://lists.w3.org/Archives/Public/www-style/2013Nov/0397.html
Reply all
Reply to author
Forward
0 new messages