在 Mac 上仅在 Chrome 处输入时输入字段变小（可能是 CSS-网格问题）

Question

我创建了一个网站，其中的输入字段在我开始输入任何内容时会变得非常小。但此行为仅出现在 Mac 上的 Chrome（当前版本 63）。 Safari 上的同一网站或 Windows 上的 Chrome 上没有显示此内容，我不知道发生了什么。

这里有两张截图：

我指出问题是由于我试图用输入字段填写 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;
}

这里大概是最低版本的问题。我还创建了一个 fiddle，但该错误未显示在 fiddle 上，Chrome 显示在 Mac 上：/

Fiddle

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;
    }
  }
}

希望有人有想法可以帮助我。

Answer 1

这似乎确实是 Chrome 中与网格系统组合处理输入字段的错误。我将输入字段包装在 div 中，现在它就像一个魅力。

感谢@Michael_B 指出正确答案：

在 Mac 上仅在 Chrome 处输入时输入字段变小（可能是 CSS-网格问题）

Input field gets small when typing only at Chrome on Mac (perhaps CSS-Grid issue)

html

css

google-chrome

css-grid

html-input