移动设备上的平滑滚动抖动（CSS、HTML、表单）

我试图构建一个可滚动的表单，但当我添加字段集和输入时，表单会抖动，并且在移动设备上无法平滑滚动，尤其是在使用Ipad和Iphone时

这是钢笔：

以下是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>

---

有没有办法解决这个问题，让表单滚动而不跳跃/抖动

我已删除脉冲动画和

溢出-y：滚动到
.modal\uuu 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;
}

   .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;
}