Date Input has incorrect sizing in Safari

In Safari 14.1 (on macOS Big Sur) the following will render ‘incorrectly’ on Safari - the date input element is over-sized.

The issue isn’t related to having another column or another field - but having a regular text input helps to highlight the sizing bug.

FF seems to render it correctly.

<div class="container">
<div class="row g-3">
  <div class="col">
    <input type="text" class="form-control" placeholder="First name" aria-label="First name">
  </div>
  <div class="col">
    <input type="date" class="form-control"">
  </div>
</div>
</div>

[javierartero]

This can be fixed from the webkit pseudo-element ::-webkit-datetime-edit

input::-webkit-datetime-edit {
  display: block;
  padding: 0;
}

[stephenreay]

Doing some digging, the trigger for this is the display: block rule on the input element.

I’ve filed a webkit bug about this: https://bugs.webkit.org/show_bug.cgi?id=236352