Input shrinks when user starts typing

问题

The contactfields on my website are shrinking as soon as the user starts typing on a mobile device. I could not detect this behavior in a desktop browser window at any size.

The contactfield is structured with the relativly new css grid.

How to recreate the bug:

1. Open my website on your mobile device
2. Scroll down to the input field
3. Focus one and start typing

---

I already tried to fix it trough applying a width and min-width to the inputs but this did not fixed it.

I gathered information in a spreadsheet about different browsers and devices to find out wether the bug appears or not.

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

I think that it might be a browser bug since css grid is relatively new?! Are you able to recreate the bug? Do you have any ideas how to fix it other than removing the css grid and structuring it with flexbox?

I would like to try to get the browser companies notified if it appears to be a browser bug so they can fix it...

/*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>

回答1:

The problem may be caused by input elements as grid items. Some browsers may be quirky with form elements in a grid container, being that this technology is so new.

Instead, wrap each input in a div. These divs now become the grid items and the inputs become their children (and are now outside the scope of grid layout).

Give each input a width: 100%, if necessary.

来源：https://stackoverflow.com/questions/44932403/input-shrinks-when-user-starts-typing