弹出窗口内的输入字段在集中时跳跃

我有一个内部有输入字段的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; 
}

来源

2016-07-31 Imran Bughio

事实证明这是一个webkit bug &我们可以做的并不多。

但是我确实发现了一个可以接受的工作。我最终保持弹出作为一个普通的文档流div没有绝对或固定的位置，而在布局和弹出之间跳转的方式，用户获得相同的感觉，就好像他是在一个弹出窗口内，下面是一步一步说明我是什么做：

当弹出被触发时，保存布局jQuery('body').scrollTop()的当前滚动位置。
动画整个页面出来opacity: 0（整个布局在一个div中，弹出窗口在它之外）。
将隐藏溢出的布局高度设置为0。
在弹出窗口中设置动画（弹出窗口的位置是静态的或相对的）
在显示弹出窗口之前，我们必须跳到页面顶部。
现在当关闭弹出窗口时做相反的事情。
动画出来弹出
组布局的高度来自动
滚动布局回到我们前面保存先前的位置。
现在我们可以将布局动画返回到opacity: 1。

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

这样做意味着我们的弹出不再位置固定&该错误不会触发。

演示：JSBIN & 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); 
    }); 
});

来源

2016-08-02 09:34:30

似乎固定的位置使问题在这里，因为在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; 
    ... 
}

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

来源

2016-07-31 08:30:30

试了它...没有工作 - https://jsbin.com/yowiqivowi –

嗯，这确实为我解决了它。经过iPhone 5，OS 9.3.3 - 9.0 Mobile/13G34 Safari/601.1测试。你有哪个操作系统？ –

我没有设备，但错误肯定来自浏览器检查[this]（https://bugs.webkit.org/show_bug.cgi?id=158276），感谢您的努力，但我相信它无法解决，但我确实使用了我在这里发布的工作。 –

弹出窗口内的输入字段在集中时跳跃

回答

相关问题