Open Bug 753662 Opened 10 years ago Updated 8 years ago
textarea has super-padding beyond box model
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!
Screenshot of Firefox 12/OS X 10.7.4: http://cl.ly/1C2s3S1y1Q2T3X3Z0K42
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.
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.
@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.
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.
You need to log in before you can comment on or make changes to this bug.