当用户开始输入时输入缩小

Question

一旦用户开始在移动设备上键入，我的 website 上的联系人字段就会缩小。我无法在任何大小的桌面浏览器 window 中检测到此行为。

联系人字段采用相对较新的 css grid。

如何重现错误：

在您的移动设备上打开我的website
向下滚动到输入字段
聚焦一个开始打字

我已经尝试通过对输入应用 width 和 min-width 来修复它，但这并没有修复它。

我在电子表格中收集了有关不同浏览器和设备的信息，以查明该错误是否出现。

https://docs.google.com/spreadsheets/d/1D3_7zh8u2MFAx5vt_mKCA9bjEI9crdDwwOSlucLLwfM/edit?usp=sharing

我认为这可能是浏览器错误，因为 css grid 相对较新？！你能重现这个错误吗？除了删除 css grid 并使用 flexbox 构建它之外，您是否有其他解决方法？

如果这似乎是浏览器错误，我想尝试通知浏览器公司，以便他们修复它...

/*I actually use SCSS so this code will not run */
/* The grid */
.grid__form {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-areas: "name email" "textarea textarea" "feedback submit";
  grid-gap: 10px;
  @media screen and (max-width: 500px) {
    grid-template-columns: 100%;
    grid-template-areas: "feedback" "name" "email" "textarea" "submit";
}

/* The contact form */
.contact {
  grid-area: contact;
  margin-bottom: 100px;
  &__header {
    font-size: 500;
    color: $text-dark-primary;
    font-size: 2rem;
    text-align: center;
    margin: 0 0 30px 0;
      @media screen and (max-width: 500px) {
      font-size: 1.5rem;
    }
    &--link {
      text-decoration: none;
      color: rgba($color-secondary-400, 0.87);
      cursor: pointer;
      transition: $transition-standard;
      @media screen and (max-width: 359px) {
        font-size: 1.3rem;
      }
      &:hover {
        text-decoration: underline;
      }
    }
  }
  &__input {
    font-family: 'Roboto', 'Noto Sans', sans-serif;
    line-height: 1.5;
    font-size: 1rem;
    padding: 0.5em;
    border: 2px solid rgba(black, 0.20);
    border-radius: 2px;
    width: 100%;
    min-width: 100%;
    color: $text-dark-primary;
    background-color: white;
    cursor: text;
    outline: none;
    transition: $transition-standard;
    &--name {
      grid-area: name;
    }
    &--email {
      grid-area: email;
    }
    &--textarea {
      grid-area: textarea;
      resize: none;
      min-height: 250px;
    }
    &:focus {
      border: 2px solid $color-secondary-200;
      width: 100%;
      min-width: 100%;
    }
  }
  &__submit {
    font-family: 'Roboto', 'Noto Sans', sans-serif;
    line-height: 1.5;
    grid-area: submit;
    justify-self: end;
  }
  &__feedback {
    grid-area: feedback;
    align-self: center;
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
  }
}

<form class="contact__form grid__form" action="_assets/php/sendMail.php" method="POST" novalidate>
  <input id="name" class="contact__input contact__input--name" type="text" name="name" placeholder="Name" />
  <input id="email" class="contact__input contact__input--email" type="email" name="email" placeholder="Email" />
  <textarea id="message" class="contact__input contact__input--textarea" type="text" name="message" placeholder="Message"></textarea>
  <p class="contact__feedback"></p>
  <button class="contact__submit button--raised" type="submit">submit</button>
</form>

Answer 1

问题可能是由 input 个元素作为网格项引起的。某些浏览器可能对网格容器中的表单元素有些古怪，因为这项技术太新了。

相反，将每个 input 包装在 div 中。这些 div 现在成为网格项，输入成为它们的子项（现在不在网格布局的范围内）。

如有必要，给每个 input 个 width: 100%。

当用户开始输入时输入缩小

Input shrinks when user starts typing

html

css

forms

css-grid