窗口调整大小时的 CSS 网格布局奇怪行为

Pop-A-Stash

Windows 7 中的Chrome 版本 60.0.3112.78（官方版本）（64 位）

我正在探索 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>