1
的Chrome版本60.0.3112.78（正式版本）（64位）在Windows 7在窗口的CSS网格布局奇怪的行为调整
我探索CSS网格布局，并在Chrome中所遇到的一个奇怪的问题（在Firefox中工作正常）。我创建了一个简单的注册表单，我想在页面上水平和垂直居中。
我使用三个嵌套网格来构建我的布局。
html {
height: 100%;
}
body {
font-family: 'Rubik', sans-serif;
margin: 0;
padding: 0;
background: #aaffff;
height: 100%;
}
#root {
height: 100%;
}
button,
input,
label {
font-family: 'Rubik', sans-serif;
font-weight: 600;
}
label {
display: inline-block;
text-align: left;
}
.formGroup {
display: inline-block;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
a:link {
text-decoration: none;
color: inherit;
}
a:hover {
text-decoration: underline;
}
*:focus {
outline-width: 3px;
outline-color: rgba(66, 66, 66, 0.7);
outline-style: dashed;
outline-offset: 3px;
}
.Input {
color: #333;
border: none;
height: 2em;
padding: 5px 10px;
display: block;
/* width: 100%; */
}
.Input:focus {
outline-width: 3px;
outline-color: rgba(66, 66, 66, 0.7);
outline-style: dashed;
outline-offset: 3px;
}
.Button {
display: inline-block;
font-weight: 800;
text-align: center;
white-space: nowrap;
vertical-align: middle;
padding: 20px 40px;
border-radius: 4px;
border: none;
background: none;
position: relative;
text-transform: uppercase;
margin: 15px 30px;
}
.Button.primary {
background: #0000ff;
box-shadow: 0 9px #000088;
color: #fff;
}
.Button.primary:hover {
top: 5px;
box-shadow: 0 4px #000088;
}
.Button.primary:active {
top: 9px;
box-shadow: none;
}
.Button.primary:focus {
outline-width: 3px;
outline-color: rgba(0, 0, 255, 0.7);
outline-style: dashed;
outline-offset: 3px;
}
.RegistrationForm-container {
display: grid;
grid-template-columns: 3% auto 3%;
grid-template-rows: 100px 25% auto 25%;
}
.RegistrationForm-container .copy {
grid-column-start: 2;
grid-row-start: 2;
}
.RegistrationForm-container form {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 3;
display: grid;
grid-template-columns: 1% auto 1%;
grid-template-rows: 25px auto 25px;
}
.RegistrationForm-container form .inner {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
display: grid;
grid-template-columns: 1% auto 1%;
grid-template-rows: 50px 50px;
}
.RegistrationForm-container form .inner .emailFormGroup {
grid-column-start: 2;
grid-row-start: 1;
margin: 0 auto;
}
.RegistrationForm-container form .inner .buttonFormGroup {
grid-column-start: 2;
grid-row-start: 2;
}
.App {
text-align: center;
height: 100%;
}<div id="root">
<div class="App">
<div class="RegistrationForm-container">
<div class="copy">
<h1>Register</h1>
<p>
By registering, you agree to our
<a href="/terms">terms of use and privacy policy</a>.
</p>
</div>
<form>
<div class="inner">
<div class="formGroup emailFormGroup">
<input
class="Input"
type="email"
placeholder="Email"
autocorrect="false"
/>
</div>
<div class="formGroup buttonFormGroup">
<button type="submit" class="Button primary">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
</div>虽然，我的网格布局确实成功了定心，当窗口大小是行为不端。当窗口调整大于原始加载大小，然后缩小窗口时，会出现一个滚动条，并将输入和按钮卡在右侧。
只有在点击页面中的某个位置或按钮，输入和使用条款链接之间的标签之后，它才会自行纠正并恢复到垂直/水平居中。
这里是行为示范：
https://codepen.io/jdoyle/pen/qXadXJ
https://plnkr.co/edit/rzAAAsfgPVUfxxmXlqYa?p=preview
我似乎无法重现该问题:(。还有什么是你，让这个怪异的行为？ –
您正在使用什么版本的Chrome浏览器测试？ –
60.0.3112.78（官方Build）（64-bit） –