Safari Quick Edit input[number] text not entirely visible

[joelwills]

THE ISSUE

Using an input[number] field in Quick Edit results in the numbers not being entirely visible. Safari only (tested in OSX).

Tested in Chrome and Firefox OSX and is not an issue there.

---

STEPS TO REPRODUCE

When in wp-admin under Posts, or Pages, select Quick Edit. Add/change one of the fields to be type="number".

(Or a plugin like WooCommerce will create a number field like this under Products when Manage stock is enabled for that product).

---

THE CAUSE

The input[number] line-height is set to inherit, and is too large (35px). Setting to a smaller number fixes it.

---

THE SOLUTION

wp-admin/css/forms.css, line 69.

Change:

/* Vertically align the number selector with the input. */
input[type="number"] {
	height: 28px;
	line-height: inherit;
}

To

/* Vertically align the number selector with the input. */
input[type="number"] {
	height: 28px;
	line-height: 1;
}

Tested in Chrome and Firefox and cannot see any affects. Changed forms.css attached.

[joelwills]

Updated CSS, line 73 changed

[kraftbj]

Howdy Joel and thanks for the patch. We have a guide at ​https://make.wordpress.org/core/handbook/contribute/ on how to create patches for your future reference.

I've tested and confirmed the original issue and patch (upload incoming). I'm also attaching before and after on Safari and Chrome.

[kraftbj]

joelwills contribution in patch form

[joelwills]

Looks great, thanks!

[rachelbaker]

In 37693:

Administration: Set a defined line-height for number type inputs to fix display issue in Safari.

Fixes #37024.
Props joelwills, kraftbj.

[ocean90]

Introduced in [34514].