1404442 - Text input with line-height:1 and border-radius makes the input too short for the text, chopping off descenders. Other browsers do not do this.

Status: RESOLVED DUPLICATE of bug 752790

(Core :: Layout: Form Controls, defect, P3)

Description

[Thomas Wisniewski]

Attachment: testcase.html

For the attached testcase, Firefox seems to presume the height of the input should be based on the given line-height of 1, and it chops off the text's descenders. Chrome, Edge, and Safari all make the input tall enough for the full text including the descenders.

This just bit eBay's search bar in https://webcompat.com/issues/10562

Note that it this only happens when the CSS appearance is off (that is, using -moz-appearance:none instead of border-radius does the same thing).

Comment 1

[Jet Villegas (inactive)]

Jonathan: WDYT? Is this something we can fix in the browser stylesheet?

Comment 2

[Jonathan Kew [:jfkthame]]

I see clipping even with the default appearance (no -moz-appearance, no border-radius) at least on macOS:

  data:text/html,<input style="line-height:1" value="Testing">

clips the descender of the "g".

It would help here if we can change the UA stylesheet for form elements to replace the use of   overflow-clip-box: content-box;  for <input> (and presumably <textarea>) elements with  overflow-clip-box: padding-box;  (or just remove it, as that should be the initial value anyhow).

But I'm not sure what that would break.... looks like Mats might know more about the background here.

Comment 3

[Karl Dubost💡 :karlcow]

isn't that very similar to Bug 752790 or more exactly a fix in Bug 752790 would solve this issue?

Comment 4

[Mats Palmgren (inactive)]

(In reply to Jonathan Kew (:jfkthame) from comment #2)
> But I'm not sure what that would break....

It would break <input> and <textarea> in general.  Try for example:

data:text/html,<input style="padding:1em" value="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX">

The text is intentionally clipped at the content edge since that's
how HTML <input> and <textarea> has always worked, unlike CSS2 overflow
which clips overflow at the padding edge.  'overflow-clip-box' controls
which clipping you get.  We have 'content-box' as the initial value for
a few form control elements that have this layout.

I guess we could make 'overflow-clip-box' a shorthand and add -block/-inline
properties, then make <input> (but not <textarea>) overflow the padding in
the block direction only...

Comment 5

[Mats Palmgren (inactive)]

And yeah, this is a dupe of bug 752790.  I'll repeat my suggestion there...