It seems like there may be a bug in Chrome, but I wanted to reach out to the community to see if anyone has found a workaround for this issue.
When creating an HTML input with the style font: inherit along with a web font, the input size appears incorrect until it is hovered over.
Before:
https://i.sstatic.net/OyPDu.png
After mouse hover:
https://i.sstatic.net/FQEWd.png
This unexpected size change can be especially frustrating when the input is part of a flow layout and causes other elements to shift position accordingly.
Sample code snippet: https://jsfiddle.net/nbilyk/sayfekc2/14/
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@200;400&display=swap" rel="stylesheet">
<style>
html {
font-family: 'Roboto Mono', monospace;
font-size: 24;
}
input {
font: inherit;
}
</style>
</head>
<body>
<input type="datetime-local">
</body>
</html>