Re: vw/vh/vm units

On Fri, Jul 10, 2009 at 3:51 PM, Tab Atkins Jr.<jackalmage@gmail.com> wrote:
> <!DOCTYPE html>
> <html><head>
> <title>Test</title>
> <style>
> body {
>        margin: 0;
>        padding: 0;
>        background: white;
> }
>
> #test {
>        background: blue;
>        padding-top: 135.5%;
> }
> </style>
> </head><body>
> <div id="test"></div>
> </body></html>

You don't the <html><head>, </head><body>, </body></html> here, BTW.
HTML 5 is great for brevity.  :)  Actually, this works just as well:

<!DOCTYPE html>
<title>Test</title>
<style>
html {
    background: white;
}
body {
    margin: 0;
    padding-top: 100%;
    background: blue;
}
</style>

> Change your viewport so that it is the screen height but as skinny as
> possible, then play with the percentage until the screen is completely
> blue but there's no vertical overflow yet.  If you then increase the
> padding-top by a *tiny* bit (half a percent or so), you'll trigger
> vertical overflow.  The scrollbar appears, reducing the width of the
> viewport, and thus the height of the block as well.  Because the
> viewport is very tall and skinny, the height change is greatly
> magnified.  In Firefox 3.5 you should see both horiz and vert
> scrollbars, both inactive, plus a visible white stripe at the bottom.

Sneaky!

> This means that, at least in this situation, Firefox resolves the
> circular dependency by just keeping the scrollbars but making them
> inactive (since the content on the page no longer overflows).

That's clever, and quite sane.

> Testing in Safari 4.0 (530.17) shows some slightly different behavior
> - at the critical point Safari leaves a white gap on the right where
> the scrollbar would be if there were any overflow.

That sounds kind of buggy, but at least it doesn't go into an infinite loop.

> IE seems to display a vertical scrollbar at all times, so it's not
> subject to this problem.

It should be possible to trigger it somehow using a horizontal scrollbar . . .


Anyway, I've gone ahead and filed a bug with WebKit, as requested by
David Hyatt in #webkit:

https://bugs.webkit.org/show_bug.cgi?id=27160

(I'm not sure if Mozilla would want me to file a bug there -- I don't
know if they want a new bug for every unimplemented CSS feature,
unless someone is going to actually work on it . . .)

Received on Friday, 10 July 2009 21:59:50 UTC