Closed Bug 1618260 Opened 4 years ago Closed 4 years ago

Number input contents are chopped at some heights when native theming is disabled


(Core :: Widget, defect, P2)




Tracking Status
firefox76 --- fixed


(Reporter: emilio, Assigned: emilio)




(1 file)

See attachment 9128303 [details] for a test-case that shows this.

See Also: → 1617342
No longer blocks: 1381938
Blocks: 1615105

At least on macOS it seems to me like this looks just as bad with the native theme enabled. The difference being that the contents overlap the input field instead of being chopped off. Is there a particular platform where this looks fine with the native theme enabled vs. disabled? And what should the fix be? Should we set a minimum size for the input field?

Flags: needinfo?(emilio)

Linux enforces the minimum size of the <input>. Windows has just 1px padding, so the text is visible.

<input type=text> works, so I think this is actually an issue with overflow-clip-box: padding-box not working as we expect here. More of a layout issue I guess.

And that layout issue is kinda long-standing.

On Linux this is also reproducible by using: data:text/html,<input type=number value=100 style="height: 1em; padding: 10px">.

I think I know how to best fix this, we'll see.

Assignee: nobody → emilio

This never worked, but it's more visible with the new form controls which have
more padding.

Make the anonymous div and co a pseudo-element, so that it inherits from the
<input> properly and thus overflow-clip-box: inherit does what we want, at least
in the block direction (which is where it matters for compat).

Doing that in the inline direction is harder given the extra stuff in the
number input like the flex wrapper, so for now reset that padding to zero.


  • Tests

  • Figuring out the inherit-overflow stuff.

The inherit-overflow stuff goes back to bug 42492... fun.

Flags: needinfo?(emilio)

(Not sure it's needed anymore, but will check and land some tests if not)

Flags: needinfo?(emilio)
Flags: needinfo?(emilio)
Attachment #9130690 - Attachment description: Bug 1618260 - WIP: Fix number input so that it honors overflow-clip-box-block. → Bug 1618260 - Fix number input so that it honors overflow-clip-box-block. r=mats,dholbert

The priority flag is not set for this bug.
:jimm, could you have a look please?

For more information, please visit auto_nag documentation.

Flags: needinfo?(jmathies)
Priority: -- → P2
Pushed by
Fix number input so that it honors overflow-clip-box-block. r=mats
Pushed by
Remove an unused whitelist item in browser_parsable_css.js.
Closed: 4 years ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla76
Regressions: 1625419
QA Whiteboard: [qa-76b-p2]
Flags: needinfo?(jmathies)
You need to log in before you can comment on or make changes to this bug.