Създадох уебсайт, на който имам полета за въвеждане, които стават много малки, когато започна да въвеждам нещо. Но това поведение се появява само в 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="/bgcss/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>
SCSS:
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;
}
}
}
Надявам се някой да има идея и да ми помогне.
