Bug 14908 – search button is below textinput box at baidu.com

• Component: Layout and Rendering
• Status: NEW

[Jungshik Shin]

'Veranda' is specified for the font. Somehow, Safari assigns a larger value to the text input box  than other browsers (FF and IE) and ends up pushing the search button below the input text box rather than to its right. 

It happens on both Windows and Mac OS X. On Windows, I tested with the latest version of Safari. On Mac OS X, I used Safari with a trunk build of WebKit.

Baidu is #1 search engine in China.

Firefox also puts the button below the text field.

[Jungshik Shin]

Created attachment 15888 [details]
text input box with a few different fonts 

Compare the width of text boxes with different fonts in Safari, IE, FF and Opera on Windows. 


On Mac OS X, FF has the same problem, but on Windows FF does not. Neither does Opera.  The root cause of this bug may be the same as that of bug 14907.

[Jungshik Shin]

In Safari, I can type '12345690' 3 times and additional '123456' (i.e. exactly 36 digits) in attachment 15888 [details]. The size of text input field is 36, but in other browsers, I can enter only up to 29 or 30.  I wonder what other browsers use to determine the width.  It's not certain EM because it would make the width larger (rather than smaller) if it were EM they use. Anyway, a lot of web sites (in East Asia) seem to depend on the behavior of other browsers....

[Robert Blaut]

*** Bug 15261 has been marked as a duplicate of this bug. ***

[Eric Seidel (no email)]

It has been hypothesized that other rendering engines use some sort of "multiplier" to account for the fact that fonts aren't monospace.  We use the "size" value as an em value for width, thus make the input wider.

[Ahmad Saleem]

Created attachment 466258 [details]
Safari matches Firefox in input field

Original issue as per Comment 0 to push the text to next line seems to not exist.

From Comment 02, it seems to be macOS vs Windows issue.

________________________
What issue - I get:

1) As seen from attached screenshot, we match Firefox but not Chrome Canary 115.

2) When I click on input field, the outline bottom is hidden behind below input field and same is with Firefox but in Chrome Canary 115, it is better shown across whole input field (could be just UX / UI issue).

_____________________