753662 - textarea has super-padding beyond box model

Status: UNCONFIRMED

(Core :: Layout: Form Controls, defect)

Description

[Alan{H}]

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: http://jsfiddle.net/alanhogan/TCckK/

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!

Comment 1

[Alan{H}]

Screenshot of Firefox 12/OS X 10.7.4: http://cl.ly/1C2s3S1y1Q2T3X3Z0K42

Comment 2

[Alan{H}]

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.

Comment 3

[Boris Zbarsky [:bzbarsky]]

> 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.

Comment 4

[Dan Dascalescu]

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 (https://github.com/component/textarea-caret-position/issues/10#issuecomment-37786158).

Here's an ever easier Fiddle that shows the bug: http://jsfiddle.net/dandv/mKbaD/

Please fix this, as it affects the ability to calculate the coordinates for autocomplete drop-down divs.

Comment 5

[Dan Dascalescu]

@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: https://f.cloud.github.com/assets/33569/2433558/f88a2b5c-ad94-11e3-8590-b552818eb03c.png

WebKit and IE don't exhibit the problem.

Comment 6

[Boris Zbarsky [:bzbarsky]]

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.