Bug 32731 – Set the <textarea> baseline on the baseline of the textarea's first line

• Status: NEW
• Component: Layout and Rendering

[Aaron Adams]

Created attachment 45172 [details]
Demonstration of this bug

Place a textarea inside a div. Give it height/width of 100px.

The enclosing div's height will be 104px. The textarea is taking up 4px extra space below itself.

If you increase font-size, the phantom height also increases — 2em = 8px, 3em = 12px, etc.

(If font-size >= 6.969em — no jokes, that's the exact number I arrived at — then you also start to get even MORE phantom height both below AND above the textarea. Watch out for that in testing this bug!)

Problem first noticed while working on linked site — observe that there is actually an extra 6px height below the div in this case, not 4px, indicating there's even more strangeness at work here.

I can't figure it out. I leave it to smart people.

Demonstration attached.

[Niall Smart]

Reproduced in WebKit nightly r91186 (18th July 2011).  To workaround, apply a negative 4 pixel margin. I am attaching a second testcase.

[Niall Smart]

Created attachment 101485 [details]
Test case for incorrect textarea height.

[Niall Smart]

This bug only occurs in standards mode.

[Cory]

I confirm that the test case is still applicable in :

Macintosh Intel Mac OS X 10.6.8

Safari 5.1.2 (6534.52.7)

and 

Chrome 17.0.963.46

does not occur in IE9, Firefox 10 adds a 2px margin on the bottom.

[Aaron Adams]

I just got a ping that this has been assigned, and couldn't even remember the original report.

Three and a half years later, looking at my example, this is pretty clearly a bad interaction between an inline-block element and its enclosing element's line-height. There are two obvious workarounds: setting textarea to display: block, or setting the enclosing div to line-height: 0.

There's probably still a bug here, since setting the div's line-height to 1 should eliminate the space, but doesn't completely; and in Niall's example, the textarea is clearly behaving differently than the input, when they should be behaving identically. But perhaps this additional information will serve to help someone.

[Robert Hogan]

https://developer.mozilla.org/en-US/docs/HTML/HTML_Elements/textarea: "In regards to CSS, an <textarea> is a replaced element. The HTML specification doesn't define where the baseline of a <textarea> is. So different browsers set it to different positions. For Gecko, the <textarea> baseline is set on the baseline of the first line of the textarea's first line, on another browser it may be set on the bottom of the <textarea> box."

In reality we seem to be the odd one out - every other browser sets the baseline on the first line of the textarea and we set it on the bottom.