css - 移动设备上的平滑滚动抖动(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;
}