ユーザーが入力を開始すると入力が縮まる

Question

websiteの連絡先は、ユーザーがモバイルデバイスで入力を開始するとすぐに縮小しています。どのようなサイズでもデスクトップブラウザのウィンドウでこの動作を検出できませんでした。

連絡先は、比較的新しいcss gridで構成されています。バグを再現する方法

：

1. は私websiteフォーカス1
2. 入力欄までスクロールダウンし
あなたのモバイルデバイス上に開いて、私は

---

の入力を開始しますすでにwidthとmin-widthを入力buに適用してそれを修正しようとしましたこれは修正されなかった。

さまざまなブラウザやデバイスに関する情報をスプレッドシートに集めて、バグの有無を確認しました。

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%をそれぞれ指定します。