초점이 맞춰지면 입력 필드가 점프합니다.

입력 필드가있는 poup가 있습니다. iPhone 또는 iPad를 사용하여 입력 필드를 클릭하면 레이아웃이 점프합니다 ...이 링크에서이 효과를 볼 수 있습니다 : https://jsbin.com/zebixifami/1 초점이 맞춰지면 입력 필드가 점프합니다.

팝업의 하단에있는 입력 필드를 눌러보십시오. 이 얼간이는 실제 제품에서 훨씬 두드러집니다. 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를 보여주는 것입니다.

이렇게하면 팝업이 더 이상 고정되지 않습니다. & 버그가 발생하지 않습니다.

데모 :

<!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

여기

https://jsbin.com/zebixifami/edit?html,css,output이 문제를 보여주는 동영상 링크입니다 : 여기

편집기 빈 URL입니다 고정 된 위치가 문제가되는 것처럼 보입니다. 아이폰과 ipad에서 당신이 그것을 클릭/탭할 때 브라우저는 입력 필드에 초점을 맞 춥니 다 (그래서 thebrowser self makks an animation).

<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

시도 아래 & Editor

JSBIN 코드입니다 그것 ... 작동하지 않았다 - https://jsbin.com/yowiqivowi –

hmmm 이것은 나를 위해 그것을 고쳤다. iphone 5, OS 9.3.3 - 9.0 Mobile/13G34 Safari/601.1에서 테스트되었습니다. 어떤 OS가 있습니까? –

나에게 장치가 없지만 브라우저에서 버그가 발생했습니다. [this] (https://bugs.webkit.org/show_bug.cgi?id=158276), 노력해 주셔서 감사합니다.하지만 믿습니다. 해결할 수는 없지만 여기서 게시 한 작업을 사용하여 끝내게되었습니다. –

초점이 맞춰지면 입력 필드가 점프합니다.

답변

관련 문제