chromeのinputで本来の高さより小さくなる

以前に書いたinputに入力したテキストの上下が切れるの記事を調べている際に遭遇したのですが、inputに指定するline-heightの値が1.06〜1.12の時だけ本来の高さより小さくなってしまうようだったので、備忘録としてメモしておきます。
確認したバージョンはchromeの 86.0.4240.183 です。

サンプルコード

line-heightの値を変えたinputをいくつか用意して試してみます。

	<div class="item">
		<div>line-height: 1</div>
		<input type="text" style="line-height: 1;">
	</div>
	<div class="item">
		<div>line-height: 1.05</div>
		<input type="text" style="line-height: 1.05;">
	</div>
	<div class="item">
		<div>line-height: 1.06</div>
		<input type="text" style="line-height: 1.06;">
	</div>
	<div class="item">
		<div>line-height: 1.12</div>
		<input type="text" style="line-height: 1.12;">
	</div>
	<div class="item">
		<div>line-height: 1.13</div>
		<input type="text" style="line-height: 1.13;">
	</div>
	<div class="item">
		<div>line-height: 1.2</div>
		<input type="text" style="line-height: 1.2;">
	</div>

jQueryを使って、inputのvalueにそのinputの高さを入れるようにします。

$(function() {
	for (var i = 0; i < $('input').length; i++) {
		var h = $('input').eq(i).outerHeight();
		$('input').eq(i).val('高さ: ' + h + 'px');
	}
});

これで試してみると、chromeでのみ1.06〜1.12の間だけ高さが小さくなっていました。
inputのline-heightを変更するデモページ

inputではなくdivの場合も試してみたのですが、この場合は特に問題なさそうでした。
divのline-heightを変更するデモページ

確認した限りchromeでだけ発生しているようでしたが、通常と比べて1pxほど小さくなるだけなので、普段実装する上では特に問題になることはなさそうです。