Ich habe eine Website erstellt, auf der ich Eingabefelder habe, die sehr klein werden, wenn ich anfange etwas zu tippen. Dieses Verhalten tritt jedoch nur bei Chrome unter Mac auf (aktuelle Version 63). Die gleiche Website auf Safari oder Chrome unter Windows zeigt dies nicht und ich habe keine Ahnung, was vor sich geht.Eingabefeld wird klein bei der Eingabe nur bei Chrome auf Mac (vielleicht CSS-Grid-Problem)
Hier zwei Screenshots: 
ich geortet es nach unten, dass das Problem durch meinen Versuch verursacht wird die CSS Rasterspalte mit dem Eingabefeld auszufüllen. Sie können dies in dem (S) CSS-Code sehen, wo ich versucht habe, diese diese Optionen mit einer zu erreichen:
// 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;
}
Hier ist die mehr oder weniger Mindestversion des Problems. Ich habe auch eine Geige, aber der Fehler zeigt nicht an der Geige mit Chrome auf dem 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>
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;
}
}
}
Ich hoffe, dass jemand hat eine Idee und kann mir helfen.
„der Fehler an der Geige zeigt nicht mit Chrome auf dem Mac“ Dies legt nahe, dass ein anderer übergeordneter Stil verursacht die Wirkung. Es ist wahrscheinlich nur angewendet auf: Fokus durch den Klang davon, haben Sie versucht, es in den Entwicklertools zu überprüfen? Sie können den Fokus erzwingen und dann sehen, welche Stile vom Browser angewendet werden. – delinear
@delinear Ja, ich habe es versucht: Aktiv und: Fokus. Sie fügen die gleichen CSS-Eigenschaften unter Windows und Mac hinzu. Grundsätzlich hinzufügen "outline-offset: -2px;" und "Umriss: -webkit-focus-ring-color auto 5px;". Selbst wenn ich mit "none" und 0 überschreibe, tritt das gleiche Problem auf. –
Möglicherweise verwandt (siehe den unteren Abschnitt in meiner Antwort über Browser-Variationen): https://stackoverflow.com/q/47723114/3597276 –