Input type="date" на iPhone выглядит крупнее ⇐ Html

[Anonymous]

На iPhone каким-то образом вход type="date" ведет себя так, как будто у него есть свойство min-width, хотя это не так.
Другими словами, он переполняет родительский контейнер.
Весь мой соответствующий код выглядит следующим образом:

Код: Выделить всё

* {
box-sizing: border-box;
}

:root {
--bg-color: #fdf6e3;
--text-color: #1f2933;
}

body {
margin: 0;
padding: 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background-color: var(--bg-color);
color: var(--text-color);
line-height: 1.6;
}

input[type="date"] {
width: 100%;
padding: 0.5rem 0.6rem;
border-radius: 4px;
border: 1px solid #cbd2d9;
font-size: 0.95rem;
color: var(--text-color);
background-color: #fff;
}

.mb-3 {
margin-bottom: 0.75rem;
}

.form-control {
display: block;
}

.row {
width: 100%;
}

Код: Выделить всё

Скриншот того, что можно увидеть:


Предложение второго пилота добавить это:

Код: Выделить всё

@supports (-webkit-touch-callout: none) {
/* iOS-specific tweaks */
input[type="date"] {
-webkit-appearance: none; /* Reduce native styling impact */
appearance: none;
}
}

не является жизнеспособным решением, поскольку оно полностью удалит пользовательский интерфейс выбора даты.
Этот вариант не работает:

Код: Выделить всё

    input[type="date"] {
width: 100%; /* Responsive width */
max-width: 100%; /* Prevent overflow */
}

Я использую (последнюю версию) iOS 26.2 на Apple iPhone 13 mini.
Какой CSS я могу применить или какой HTML мне нужно добавить, чтобы это исправить? Или есть решение на JavaScript?
На Android и на ПК рассматриваемый ввод работает правильно.
Если вы хотите увидеть настоящий веб-сайт в действии: https://www.szammisztika.org/

Подробнее здесь: https://stackoverflow.com/questions/798 ... -on-iphone