Open Bug 753662 Opened 12 years ago Updated 2 years ago

textarea has super-padding beyond box model


(Core :: Layout: Form Controls, defect)

12 Branch





(Reporter: bugzilla, Unassigned)


(Whiteboard: DUPEME)

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.7; rv:12.0) Gecko/20100101 Firefox/12.0
Build ID: 20120420145725

Steps to reproduce:

If you style a textarea and div IDENTICALLY, the text in the textarea is off by a pixel and will wrap "two pixels earlier" than text in the div.

View my test case:

I created a textarea and div and styled them identically, including metrics, font, line-height, etc. However you can see that the textarea text is rendered in a space that is 2px smaller than in the div. This is stupid.

Actual results:

Text is in a smaller space than allocated per the CSS box model.

Expected results:

The textarea's content should exactly overlap the div in the text case, since everything about it (padding, size, font, etc.) is exactly the same per CSS!
Screenshot of Firefox 12/OS X 10.7.4:
Also please note that Webkit on Desktop does not exhibit this problem. Nor does IE9 reliably do so, though it does exhibit unpredictable sub-pixel discrepancies of this nature.
Component: Untriaged → Layout: Form Controls
Product: Firefox → Core
> since everything about it (padding, size, font, etc.) is exactly the same per CSS!

Except textarea is a replaced element, and has internal spacing to keep the caret from becoming invisible.
Whiteboard: DUPEME
Confirmed - I ran into the same problem while working on a component to calculate the (x, y) position of the caret in a text area (

Here's an ever easier Fiddle that shows the bug:

Please fix this, as it affects the ability to calculate the coordinates for autocomplete drop-down divs.
@Boris: How about displaying the internal spacing only when the padding left or right is zero? Here's a screenshot of the padding being artificially increased in Firefox:

WebKit and IE don't exhibit the problem.
WebKit and IE have behavior here that can't be described in CSS.  It's possible to do that; it just requires completely revamping how textarea's layout is implemented...  All of this has been discussed at length in the past.
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.