Slight clipping of input text in Chrome 73

[danielbachhuber]

The corresponding CSS is:

normalize.css/normalize.css

Lines 160 to 169 in fc091cc

	button,
	input,
	optgroup,
	select,
	textarea {
	font-family: inherit; /* 1 */
	font-size: 100%; /* 1 */
	line-height: 1.15; /* 1 */
	margin: 0; /* 2 */
	}

Changing line-height to 1.2 or greater fixes the clip.

I'm not experiencing this issue in Firefox 65 though.

Related #769

[mattbrundage]

The descenders (the "g" characters) are clipping because the particular font-family in use here has a computed content-area height that is significantly more than the computed virtual-area height (that is, the line-height). This might help illuminate the issue: https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align

The corresponding CSS rules you cited presuppose that the font-family that's getting inherited has a computed content-area that's within a typical (normal) range.

line-height: normal is based on font metrics. Using it in this situation will likely prevent clipping,

It would be good to have a reduced test case that loads the font-family depicted in your screenshot

[mnr73]

add height : 100% to inputs

[mhsmith]

This occurs in Chrome 87 on Windows with the common font Segoe UI. For example, see the search box at the top left of https://pradyunsg.me/furo/

Setting line-height: normal fixes the problem.

[mattbrundage]

@mhsmith , line-height: normal is -- not coincidentally -- the default value in Chromium, Gecko, and WebKit user agent stylesheets.

There is no longer a need to normalize line-height here. See my previous comment in this issue.