Question

我有一个固定的形状，使用固定定位分层在身体的顶部。

此全屏幕接管方法适用于Chrome和Safari桌面，但在移动设备上，它会移动整个页面以补偿键盘出现。想知道这是否可以修复没有 JS。

      <!--CSS-->
      .test-form {
          background-color: #fff;
          padding: 40px;
          color: #333;
          position: relative;
      }

      ::-webkit-scrollbar { 
          display: none; 
      }

      .test-form.open {
          top: 0;
          margin: 0;
          position: fixed;
          left: 0;
          right: 0;
          bottom: 0;
          top: 0;
          z-index: 200;
          border: 1px solid red;
          background-color: #ddd;
          overflow: hidden;
      }

      .test-form label {
          display: block;
      }

      .test-form input {
          display: block;
      }

      .test-form.open .test-form__content {
          position: absolute;
          top: 10px;
          bottom: 10px;
          left: 20px;
          right: 20px;
          padding: 20px;
          border: 1px solid yellow;
          width: auto;
          height: auto;
          background-color: #eee;
          overflow-y: scroll;
      }

    <!--TEST FORM-->

    <div class="test-form open">
        <div class="test-form__content">

                <div class="filler">
                    <p>
                          "I Want You Back"

                          Uh-huh huh huhhh
                          Let me tell ya now
                          Uh-huh
                          (Mmhhmmm)

                          When I had you to myself, I didn't want you around
                          Those pretty faces always made you stand out in a crowd
                          But someone picked you from the bunch, one glance was all it took
                          Now it's much too late for me to take a second look

                          Oh baby, I need one more chance, hah
                          I tell you that I love you
                          Baby, oh! Baby, oh! Baby, oh!
                          I want you back!
                          I want you back!
                          [Fade out]
                    </p>
                </div>

                <form>
                    <label>Input One</label>
                    <input type="text" name="one" placeholder="Input Here">
                    <br>
                    <label>Input Two</label>
                    <input type="text" name="two" placeholder="Input Here">
                    <br>
                    <label>Input Three</label>
                    <input type="text" name="three" placeholder="Input Here">
                    <br>
                    <label>Input Four</label>
                    <input type="text" name="four" placeholder="Input Here">
                    <br>
                    <label>Input Five</label>
                    <input type="text" name="five" placeholder="Input Here">
                </form>
        </div>
    </div>

    <h1>footer</h1>
</body>

我已经看到article on focus jumping以及在iOS Safari中使用固定元素的其他问题，但我无法提出解决方案。

下面的JSFiddle（预览原始结果iOS模拟器并选择不同的输入，你会看到应用程序上下跳动）：

https://jsfiddle.net/a01tnona/

查看screengrab：

http://cl.ly/1C0S153C0R0J

为什么在Mobile Safari中选择输入时整个页面会跳转？

0 个答案: