Bug 71323 – Text positioning inside <input> elements is margin+border+padding+1px

• Component: Forms
• Status: RESOLVED FIXED

[Andy E]

If you look at the attached test case, you will see three elements, a <span>, a <button> and an <input type="text">, all styled to look exactly the same.  Using JavaScript and `window.getComputedStyle()`, the styles are copied from the <input> element, which has several styles set via CSS, to the <span> and the <button>.  The result is that all three elements look *almost* exactly the same, with the single exception being the text position in the <input>.  A vertical bar has been positioned at margin+border-width+padding (0+2+4=6px), and you can see that the text inside the <button> and <span> elements is touching the vertical bar, whereas there is a 1px gap between the bar and the <input> element's text.

This is very similar to a bug in Gecko, although theirs affects all inline replaced elements - see https://bugzilla.mozilla.org/show_bug.cgi?id=698887.  In WebKit, this only appears to affect <input> elements.

[Andy E]

Created attachment 113222 [details]
Test case

[Andy E]

Actually, there appears to be a -1px difference in the y position of the text too. 

If anyone's wondering what the use case is for styling a non-replaced element to look the same as a replaced element - I'm creating an input mask which overlays a <span> on an <input>.  The <span> contains the mask text, which is a different colour to the input text.  As you type into the <input>, the <span> text disappears.  Naturally, this bug causes an alignment issue with the <span> text and <input> text.

[Ryosuke Niwa]

Yes. This is as expected to match IE's behavior. Also see the bug 86784.

[Ryosuke Niwa]

Not so fast I guess. The attached test case works fine on IE9.

[Ryosuke Niwa]

My patch for the bug 86784 will fix this bug. So let's land that patch first and add one more test case in this bug :)

Created attachment 157072 [details]
<input> element has baked in 1px padding on left

I am seeing the same thing. It is readily visible when selecting the text. The attached screenshot shows the fixed 1px padding on the left. The <input> element has the style:

border: 1px solid blue;
outline: none;
margin: 0px;
padding: 0px;

This has been fixed as of r123603, not sure why it is still marked NEW.

[Ryosuke Niwa]

(In reply to comment #7)
> This has been fixed as of r123603, not sure why it is still marked NEW.

I meant to add a test case here then I totally forgot about it :( I'll do that today.

[Ryosuke Niwa]

Actually... LayoutTests/fast/forms/input-textarea-padding-match.html covers exactly this.