モバイルデバイスのスムーズスクロールシェイプ（CSS、HTML、フォーム）

Question

スクロール可能なフォームを作成しようとしていますが、フィールドセットと入力を追加するとフォームが揺れ、モバイルデバイス上でスムーズにスクロールしませんIpadとIphone。ここで

はペンです：ここではhttp://codepen.io/ahayes8/pen/GrrpJy

はHTMLである：ここでは

<div class="table vh-100 w100"> 
    <div class="table-cell middle"> 
     <div class="modal mt2 w100 center"> 
      <input id="modal__trigger" type="checkbox"> <label for="modal__trigger">open form</label> 
      <div aria-describedby="modal_desc" aria-labelledby="modal__title" class="modal__overlay" role="dialog"> 
       <div class="modal-outter"> 
        <div class="modal__wrap"> 
         <div class="modal-content"> 
          <div class="table mb2 col-12" id="nav" style="border-bottom: 1px solid #fff"> 
           <h2 class="table-cell middle col-9" id="modal__title">Headline</h2> 
           <div class="table-cell middle col-3 right-align"> 
            <label for="modal__trigger">×</label> 
           </div> 
          </div> 
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac laoreet elit. Phasellus dignissim purus vitae urna cursus, quis congue ligula tristique. Ut nec blandit risus. Donec at orci ut justo venenatis viverra. Suspendisse in volutpat lacus. In enim est, dapibus eget ipsum sed, suscipit ultrices diam.</p> 
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac laoreet elit. Phasellus dignissim purus vitae urna cursus, quis congue ligula tristique. Ut nec blandit risus. Donec at orci ut justo venenatis viverra. Suspendisse in volutpat lacus. In enim est, dapibus eget ipsum sed, suscipit ultrices diam.</p> 
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac laoreet elit. Phasellus dignissim purus vitae urna cursus, quis congue ligula tristique. Ut nec blandit risus. Donec at orci ut justo venenatis viverra. Suspendisse in volutpat lacus. In enim est, dapibus eget ipsum sed, suscipit ultrices diam.</p> 
          <div> 
           <form> 
            <div> 
             Please complete the required fields. 
            </div> 
            <fieldset> 
             <label>Field 1</label><input type="text" value=""> 
            </fieldset> 
            <fieldset> 
             <label>Field 2</label><input type="text" value=""> 
            </fieldset> 
            <fieldset> 
             <label>Field 3</label> <input type="text" value=""> 
            </fieldset> 
            <fieldset> 
             <label>Field 4</label> <input type="text" value=""> 
            </fieldset> 
            <fieldset> 
             <label>Field 5</label> <input type="text" value=""> 
            </fieldset> 
            <fieldset> 
             <label>Field 6</label> <select> 
              <option value=""> 
               Please select a category.. 
              </option> 
              <option value="1"> 
               Cat #1 
              </option> 
             </select> 
            </fieldset> 
            <fieldset> 
             <label>Field 7</label> 
             <textarea></textarea> 
            </fieldset> 
            <div id="usp-submit"> 
             <input type="submit"> 
            </div> 
           </form> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

は私の関連するCSSです。完全なものはペンです。

.modal { 
    display: inline-block; 
} 

fieldset { 
    margin-top:2rem; 
    margin-bottom:2rem; 
} 

.modal__overlay { 
    position: fixed; 
    height: 100%; 
    width: 100%; 
    top: 0; 
    left: 0; 
    z-index: 600; 
} 

.modal-outter { 
    position: absolute; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    background: #ef3c42; 
} 

.modal__wrap { 
    position: absolute; 
    overflow: auto; 
    -webkit-overflow-scrolling: touch; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    padding: 1.75em; 
} 

.modal-content { 
    max-width: 600px; 
    margin: 0 auto; 
    padding: 2rem 0; 
    text-align: left; 
    margin-top: 20px; 
    margin-bottom: 20px; 
} 


input:checked ~ .modal__overlay { 
opacity: 1; 
z-index: 800; 
} 

#modal__trigger { 
position: absolute; 
    top: -1000px; 
} 

fieldset label { width: 100%;} 
fieldset input { width: 100%;} 
textarea {width: 100%;} 
select { display: block; width: auto; margin: 0; } 

これを修正してフォームをスクロール/シェイクすることなくスクロールできますか？

Answer 1

パルスアニメーションを削除しました。overflow-y: scroll;を.modal__wrapクラスにジャンプした後に、このケースのヘルプにしてもよいでしょう。

.modal-outter { 
     position: absolute; 
     top: 0; 
     width: 100%; 
     height: 100%; 
     background: #ef3c42; 
    } 

.modal__wrap { 
    position: absolute; 
    overflow-y: scroll; 
    -webkit-overflow-scrolling: touch; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    padding: 1.75em; 
}