Я создал веб-сайт, на котором у меня есть поля ввода, которые становятся очень маленькими, когда я начинаю что-то печатать. Но такое поведение проявляется только в Chrome на Mac (текущая версия 63). Тот же веб-сайт в Safari или Chrome в Windows этого не показывает, и я понятия не имею, что происходит.
Вот два скриншота: 
Я точно определил, что проблема вызвана моей попыткой заполнить столбец сетки css полем ввода. Вы можете увидеть это в коде (S)CSS, где я пытался добиться этого с помощью одного из следующих вариантов:
// All these 3 options get me to the same bug:
justify-items: stretch;
// Same with this option:
input {
width: 100%;
}
// Or this one:
input {
justify-self: stretch;
}
Вот более-менее минимальная версия проблемы. Я также создал скрипку, но ошибка не отображается на скрипке с Chrome на Mac:/
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="showcase" class="grid">
<!-- OTHER STUFF I ARRANGE WITH GRID -->
<form action="#" class="grid">
<input type="text" name="name" placeholder="Name">
</form>
</div>
</body>
</html>
СКСС:
input {
border: 0px;
font-size: 15px;
padding: 1.4em;
}
.grid {
display: grid;
align-items: center;
justify-items: center;
}
#showcase {
grid-template-columns: auto 180px;
form {
background: rgba(34, 34, 30, 0.75);
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 1ch;
padding: 3em;
justify-self: stretch;
// All these 3 options get me to the same bug:
justify-items: stretch;
// Same with this option:
input {
width: 100%;
}
// Or this one:
input {
justify-self: stretch;
}
}
}
Я надеюсь, что у кого-то есть идея и может помочь мне.
