仅在Mac上的Chrome键入时输入字段变小（可能是CSS-Grid问题）

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

这里或多或少是问题的最低版本。我还创建了一个小提琴，但该错误并没有显示在Mac上的Chrome小提琴：/ /

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指出正确答案：https://stackoverflow.com/a/44934676/2224874

仅在Mac上的Chrome键入时输入字段变小（可能是CSS-Grid问题）

问题描述投票：0回答：1

1个回答

最新问题

仅在Mac上的Chrome键入时输入字段变小（可能是CSS-Grid问题）

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1