Question

我的输入字段里面有一个poup。当我使用iPhone或iPad点击任何输入字段时，布局会跳转...您可以在此链接中看到此效果：https://jsbin.com/zebixifami/1

尝试点击弹出窗口底部的输入字段，你会看到这个混蛋，这个混蛋在实际产品中更为突出。

以下是编辑器网址：https://jsbin.com/zebixifami/edit?html,css,output

以下是显示此问题的视频的链接：https://www.youtube.com/watch?v=LvmAl-HQI8Y&feature=youtu.be

HTML：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
</div>
<div class="popup">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
</div>

</body>
</html>

CSS：

.popup {
  position: fixed;
  top: 50%;
  left: 5%;
  width: 90%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  max-height: 90%;
  background: #fff;
  overflow: auto
}

input {
  width: 90%;
  margin-left: 5%;
  display: block;
  margin-bottom: 20px;
  margin-top: 20px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background: #000;
  oveflow: hidden;
}

Answer 1

事实证明这是webkit bug＆amp;我们无能为力。

但是我确实找到了一个可以接受的工作。我最终保持弹出窗口作为普通文档流div而没有绝对或固定位置，同时在布局和弹出窗口之间跳转，以便用户获得与弹出窗口内部相同的感觉，下面是我所做的一步一步的指示：

触发弹出窗口时，保存布局jQuery('body').scrollTop()的当前滚动位置。
为整个页面添加动画opacity: 0（整个布局位于一个div中，弹出窗口位于其外部。）
将布局高度设置为0并隐藏溢出。
弹出窗口中的动画（弹出窗口将是静态位置或相对位置）
在显示用户的位置之前，我们必须跳到页面顶部才能显示弹出窗口。
现在，当关闭弹出窗口时，请执行相反的操作。
动画弹出
将布局高度设置为自动
将布局滚动回我们之前保存的上一个位置。
现在我们可以将布局设置回opacity: 1。

这种逐步过渡将使用户感觉它是一个弹出窗口，但我们只是隐藏布局并显示另一个类似于弹出窗口的div。

这样做意味着我们的弹出窗口不再是固定位置＆amp;这个虫子不会触发。

演示：JSBIN＆amp; Editor

以下是代码：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="wrapper">
  <section>
    <h1>A</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
    <a href="#" class="js-popup-open">Click me.</a>
  </section>
  <section>
    <h1>B</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
    <a href="#" class="js-popup-open">Click me.</a>
  </section>
  <section>
    <h1>C</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
    <a href="#" class="js-popup-open">Click me.</a>
  </section>
  <section>
    <h1>D</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
    <a href="#" class="js-popup-open">Click me.</a>
  </section>
</div>
<div class="popup-wrap"></div>
<div class="popup">
  <a href="#" class="js-popup-close">Close</a>
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
</div>

</body>
</html>

CSS：

body{
  background: #000;
  padding: 0;
  margin: 0;
}
.wrapper{
  background: #fff;
  margin: 0;
  padding: 20px;
}

.popup {
  position: relative;
  top: -5%;
  opacity: 0;
  left: 5%;
  width: 90%;
  max-height: 90%;
  background: #fff;
  overflow: auto;
  display: none;

  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition:  all 0.35s ease-in-out;
  -o-transition:    all 0.35s ease-in-out;
  -ms-transition:   all 0.35s ease-in-out;
  transition:     all 0.35s ease-in-out;
}
input {
  width: 90%;
  margin-left: 5%;
  display: block;
  margin-bottom: 20px;
  margin-top: 20px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.popup-wrap{
  position: absolute;
  background: rgba(0,0,0,0.75);
  top: 0;
  left: 0;
}
.popup-on body {
  oveflow: hidden;
}
.popup-on .popup{
  display: block;
}
.popup-on .wrapper{
  overflow: hidden;
}
.popup-animate .popup{
  top: 5%;
  opacity: 1;
}

JS：

$(document).ready(function(){

  var currentScrollPosition = 0;

  // Open Popup
  $('.js-popup-open').click(function(e){
    e.preventDefault();

    // Save current popup location.
    currentScrollPosition = jQuery('body').scrollTop();

    // Fadeout layout
    $('.wrapper').animate({ 
      opacity: 0
    }, 350, function () {
      // Hide layout
      $('.wrapper').css('height', 0);

      // Show Popup
      $('body').addClass('popup-on');

      // Scroll layout to top so popup is not shown half way through.
      jQuery('html, body').animate({
        scrollTop: 0
      }, 0);

      // Animate Popup
      setTimeout(function(){
        $('body').addClass('popup-animate');
      }, 10); /* this set timeout let transition be applied even when display property was changed from display none to blcok */

    });
  });

  // Close Poup
  $('.js-popup-close').click(function(e){
    e.preventDefault();

    // Animate out the poup
    $('body').removeClass('popup-animate');

    // Wait while popup is animting to fade.
    setTimeout(function(){

      // Hide the popup
      $('body').removeClass('popup-on');

      // scroll to previous position.
      jQuery('html, body').animate({
        scrollTop: currentScrollPosition
      }, 0);

      // Layout back to normal height.
      $('.wrapper').css('height', 'auto');

      setTimeout(function(){
        $('.wrapper').animate({ 
          opacity: 1
        }, 350);
      }, 10);

    }, 360);
  });
});

Answer 2

似乎固定的位置使问题出现在这里，因为在iphone和ipad上，当您点击/点击它时，浏览器会聚焦输入字段（因此浏览器自我制作动画）。尝试这样做：

<div class="backdrop">
    <div class="popup">
       <input type="text">
       ...
    </div>
</div>

并将此css用作背景幕：

.backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

并在你的弹出式css属性中只改变位置：固定到位置：绝对。

.popup {
    position: absolute;
    ...
}

我希望这可以解决这个问题。

弹出窗口内的输入字段在聚焦时跳跃

2 个答案: