1829706 - Scrollbars adding height to textareas in Firefox, but not Chrome, leading to layout differences on Google.com

Status: RESOLVED DUPLICATE of bug 1830576

(Core :: Layout: Form Controls, defect)

Description

[Thomas Wisniewski [:twisniewski]]

Textareas in Firefox are made taller by the presence of a vertical scrollbar, seemingly whether it is displayed or not. This is making the alignment of Google Search look strange on Firefox, as reported at webcompat.com.

Here is an example: data:text/html,<style>* { margin:0; padding:0; border:0; }</style><textarea style="background:white;font:12px/12px sans-serif"></textarea>

If I always enable scrollbars on MacOS, then the textarea's height gets significantly taller in Firefox, but not Chrome.

Likewise, if I set scrollbar-width:none on the textarea for Google Search, then the alignment seems fine.

Comment 1

[James Graham [:jgraham]]

Nominating for webcompat-priority triage because even though it's a minor visual issue that doesn't affect site functionality, breakage on google.com is likely to be highly user visible.

Comment 2

[Daniel Holbert [:dholbert]]

(In reply to Thomas Wisniewski [:twisniewski] from comment #0)

Textareas in Firefox are made taller by the presence of a vertical scrollbar, seemingly whether it is displayed or not.

(It's actually the horizontal scrollbar, not vertical. Chrome also sizes the textareas to be the same height regardless of whether the scrollbar is present or not; they just don't bother to reserve space for it, whereas we do. I filed bug 1830576 with some testcases; duping there.)

This is making the alignment of Google Search look strange on Firefox, as reported at webcompat.com.

We also have bug 1829588 filed on this, and I just reached out to some Google folks about this as noted in bug 1829588 comment 6.