移动设备(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;
}