Date Input has incorrect sizing in Safari

[stephenreay]

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>

[ffoodd]

Made a reduced test case on CodePen so I can confirm with BrowserStack:

I'm unable to find out what's happening here, for now.

[stephenreay]

I did some digging before filing the issue, it's quite bizarre to me (but CSS isn't really my regular gig). The shadow DOM for browser-defined parts of the element don't show as having the extra space (although they do have white-space: pre rules) - there's just this mysterious extra spacing below it.

Screenshots from Safari inspector showing the details for the input and the root div inside the shadow DOM. Let me know if there's any more info/tests/debugging I can help with from a 'real' safari.

The input itself:

The shadow dom root div:

[stephenreay]

Updated demo on codepen (previous one has a broken CSS link)

https://codepen.io/stephenreay/pen/ExbWoRz

[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

[mdo]

This one is super rough because the display: block makes it worse, but it's not the only issue at play. Plus, the styles are inconsistent between Chrome and Safari, so it's unclear how we could make this 100% consistent between browsers. We even had issues in the past when using a fixed height.

[javierartero]

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

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

[x-adri-x]

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

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

Now, this worked like magic! Thank you so much, Safari was really ruining my day.