Possible CSS issue with ::-webkit-datetime-edit-minute

[AlbertWiersch]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

While testing https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css with CSS HTML Validator, I found a possible bug/issue.

Reduced test cases

Shouldn't ::-webkit-datetime-edit-minute be ::-webkit-datetime-edit-minute-field instead?

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

5.3.8

[julien-deramond]

Thanks for reporting this, @AlbertWiersch, great catch!

I’m not deeply familiar with these WebKit datetime selectors, and this one was introduced about five years ago in Bootstrap. From a quick scan of docs and usage examples online (CodePen, etc.), I couldn’t find any historical references to ::-webkit-datetime-edit-minute. The only occurrences I found were in Bootstrap-related code.

::-webkit-datetime-edit-minute-field does indeed seem to be the correct selector to use here.

We’d need to verify compatibility with our Browserslistrc configuration and confirm that it behaves as expected, but this could be a valid fix, either for v5 or to be integrated directly into v6.

/cc @mdo

[pardeyke]

That's a great catch!

This is probably related to #42007.

Inspecting the css in reboot:

::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-minute,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field {
  padding: 0;
}

All, but the minute filed get padding: 0. That's why it may be misaligned.