Parent of is taller than when the document has in Chrome

Question

Try pasting this HTML into a file and opening it in Chrome:

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <div>
      <textarea></textarea>
    </div>
  </body>
</html>

The parent is a bit bigger than the textarea:

size of textarea's parent

This is only the case on Chrome (not Firefox).

I noticed that if I removed the doctype, it behaves normally - the parent is the correct size. My first thought is that it's just different default useragent styles. Here's a diff between the the user agent styles with and without the doctype:

useragent styles with and without doctype

So I tried matching the padding and the box-sizing like so:

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <div>
      <textarea style="box-sizing: border-box; padding: 2px 0px 0px 2px;"></textarea>
    </div>
  </body>
</html>

But the problem doesn't go away. Any idea what's causing this?

(Sorry for the over-sized images - I'm not aware of any markdown tricks to make them a more reasonable size.)

devfieldnotes · Accepted Answer

Yes, it is a chromium bug.

The best workaround is to set it to block type box.

textarea {
  display: block;
}

Parent of <textarea> is taller than <textarea> when the document has <!DOCTYPE html> in Chrome

Tags:

html

css

google-chrome

joe

1 Answers

devfieldnotes

Recent Activity

Donate For Us