代码之家 › 专栏 › 技术社区 › Mr.Floppy

仅在Mac上的Chrome上键入时,输入字段变小(可能是CSS网格问题)

html-input css-grid google-chrome css html

Mr.Floppy · 技术社区 · 8 年前

我创建了一个网站,在这个网站上输入的字段在我开始键入任何内容时都会变小。但这种行为只出现在Mac上的Chrome上(当前版本63)。Safari或Windows Chrome上的同一个网站没有显示这一点,我不知道发生了什么。

以下是两个屏幕截图:

我明确指出,问题是由于我试图用输入字段填写css网格列造成的。您可以在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,但在Mac上Chrome的fiddle上没有显示该bug:/

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>

SCS:

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

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