HTML5: Extra scrollbar in Chrome when all elements are 100% x 100%

HTML & CSS
1

Operating system: Windows XP
Browser: Chrome 31
Issue: When I look at the following, I see an extra vertical scrollbar:

<!DOCTYPE html>
    <html>

    <head>
        <meta charset="UTF-8">
        <title>Textarea</title>
        <style>
            * {
                width: 100%;
                height: 100%;
                margin: 0;
                border: 0;
                padding: 0;
            }
        </style>
    </head>

    <body>
        <form>
            <textarea></textarea>
        </form>
    </body>

    </html>

URL: https://googledrive.com/host/0B5jOXzxlxbMhYVF3b0lubjlDWm8/textarea.html

It doesn’t happen if I use HTML 4.01 Transitional doctype:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

What’s the reason and solution?
Thanks!

2

Try this:


textarea{display:block}

The textarea is inline-block by default so you get white-space nodes thrown into the mix which may cause discrepancies.

3

Perfect! Thanks Paul! :slight_smile: