Re: [css3-values] Interaction of vw/vh and scrollbars

On 4/12/2012 10:02 AM, Tab Atkins Jr. wrote:
> Right now the V&U spec doesn't mention anything special about whether
> the presence of scrollbars affects the size of the vw/vh units.
> Here's a testcase:
>
> <!DOCTYPE html>
> <div></div>
> <style>
> body { margin: 0; overflow: scroll; }
> div {
>    background: url('http://xanthir.com/pony') no-repeat right top silver;
>    width: 100vw; height: 100vh;}
> </style>
>
> (Alter the overflow value to get different results.)
>
> In the two browsers that currently support vw/vh, Chrome and IE,
> neither one pays any attention to scrollbars.  Regardless of the value
> of overflow on <body>, they set the two values to the width/height of
> the scrollbar-less viewport.


For the below screenshot, on the left is the original overflow: scroll. 
On the right is overflow: hidden.

http://css-class.com/test/temp/chrome-bug-vw-vh-overflow.jpg

Chrome is showing a bug that reminds me of an Opera bug with min-height 
(see below) and an old IE7 bug. Below is some code that will trigger the 
Opera bug.


<!DOCTYPE html>
<div></div>
<style>
html { height: 100% }
body { height: 100%; background: red; overflow: hidden; margin: 0; }
div {
   background: lime; min-height: 100%;
}
</style>


<div></div>


-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/

Received on Thursday, 6 December 2012 06:46:59 UTC