javascript - スクロールすると非表示の要素がモバイル ブラウザに表示される

Question

以下の例は、私のポートフォリオWeb サイトで使用している方法です。

それは「私が住んでいる場所」、「それがどのように始まったか」、「私がどのように働いたか」の約セクションにあり、各スライダーには画像とGoogleマップがあります. 私のウェブサイトの例にあるようにコードを入力しましたが、「overflow: hidden」を削除したのは、Chrome の画面に黒い四角が表示され、ちらつきが発生したためです。スライダーは、デスクトップ コンピューターのブラウザーで正常に動作しています。

この問題は、Iphone で safari や chrome、android で chrome などのモバイル ブラウザーを使用すると発生します。

「slider」の Google マップを開いていないのに画面上部に表示され、「slider3」の画像を閉じてページをスクロールすると画面にスタックします。モバイル Safari の場合、最初は問題ないように見えますが、スライダーを開いたり閉じたりすると、ページをスクロールすると、スライダーが画面の上部または下部に固定されます。

「slider2」では同じ問題は発生しませんが、おそらく横にあるためです。

モバイルブラウザで問題が発生する理由を誰か知っていますか?

前もって感謝します。

jsfiddle

html

<div style="height:100%">
<span id="button">open slider 1</span>
<span id="button2">open slider 2</span>
<span id="button3">open slider 3</span>

    <div id="slider"> <span id="button4">close</span>
    </div>
    <div id="slider2"> <span id="button5">close</span> 
    </div>
    <div id="slider3"> <span id="button6">close</span> 
    </div>
</div>

CSS

html {
    height: 100%;
}
body {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
    margin:0;
}
.page.in {
    left: 0;
    z-index: 1;
}

#slider {
    position: absolute;
    width: 100%;
    height: 50%;
    bottom: 100%;
    background: yellow;
    transition: bottom 1s;
}
#slider.in {
    bottom:50%;
}
#slider2 {
    position: absolute;
    width: 50%;
    height: 100%;
    left:100%;
    top:0;
    background: red;
    transition: left 1s;
}
#slider2.in {
    left:50%;
}
#slider3 {
    position: absolute;
    width: 100%;
    height: 100%;
    top:100%;
    background: blue;
    transition: top 1s;
}
#slider3.in {
    top:0;
}

JavaScript

$('#button').click(function(){
    $('#slider').addClass('in');
});

$('#button2').click(function(){
    $('#slider2').addClass('in');
});

$('#button3').click(function(){
    $('#slider3').addClass('in');
});

$('#button4').click(function(){
    $('#slider').removeClass('in');
});

$('#button5').click(function(){
    $('#slider2').removeClass('in');
});

$('#button6').click(function(){
    $('#slider3').removeClass('in');
});