Created attachment 45545 [details] minimal testcase In the test case: an input field (text field, input[type="text"]) has 400px padding-top. However, the text string ('abcd' in textcase) inside the input field is placed in the vertical center (~200px from top). Expected: test string positioned at the bottom of the textfield. (test case is a reduction from the search field on YouTube) Correct: Firefox 3.6 +, Opera 10.0, 10.5, IE 8. Fails: WebKit latest, Safari 4 See partly related Gecko bug: https://bugzilla.mozilla.org/show_bug.cgi?id=525897 The Gecko 'bug' is visible on sites such as Apple.com and YouTube.com
Created attachment 45547 [details] screenshot of test case left: WebKit latest nightly right: Minefield (Gecko latest nightly)
There is explicit code in RenderTextControlSingleLine::layout to center the text of an <input type="text"> and <input type="search">. Can anyone comment on whether or not this is something that WebKit wants to fix or not?
(In reply to comment #2) > There is explicit code in RenderTextControlSingleLine::layout to center the > text of an <input type="text"> and <input type="search">. Can anyone comment on > whether or not this is something that WebKit wants to fix or not? At r58177: http://trac.webkit.org/browser/trunk/WebCore/rendering/RenderTextControlSingleLine.cpp#L234
We do intentionally center text. It might be to match historical WebKit behavior. We should not change this without doing significant investigation to make sure we wouldn't regress layout on existing websites.
(In reply to comment #4) > We do intentionally center text. It might be to match historical WebKit behavior. We should not change this without doing significant investigation to make sure we wouldn't regress layout on existing websites. Is there any way a developer could achieve the results of all other browsers in webkit? The following code works in IE6/Firefox/Opera, but not in any webkit browser: label { position:absolute; top:50px; left:25px; } input { border:1px solid black; height:100px; padding:70px 25px 10px; width:300px; } ... <label for="sometext">The text:</label> <input type="text" id="sometext" placeholder="Enter text here"/>
Downstream bug http://code.google.com/p/chromium/issues/detail?id=76883 Test case from it http://jingwei.li/temp/bug.html Webkit differs from Firefox.
Are there any plans to fix this misbehaviour? It is really annoying to not be able to proper align the text within input fields. All other major browser are doing this right, except Webkit/Safari. See this jsfiddle for another test case: http://jsfiddle.net/7Rncd/.