I'm trying to find a way around this Chrome bug that adjusts the size of a data input when it's hovered (internally the ::-webkit-datetime-edit element):
body {
font-family: Fraunces, sans-serif;
}
input {
font-family: inherit;
}<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Fraunces&display=swap" rel="stylesheet">
<input type="date" />Note that the date part ::-webkit-datetime-edit gets wider on hover, how can I workaround the bug (preferably I don't have to trigger a reflow for this in JS)? I picked a random font here and it's still broken.