Bootstrap Modalの固定要素はスクロールしません。

Question

ブートストラップのモーダルをページのオーバーフローではなくページをスクロールさせ、スクロールできるように変更しました。次にモーダルボディの中で私は固定位置divをposition: fixed; bottom: 0;に設定しました（私はそれを動的に生成するため、このコードを本体に入れておきたいと思います）。

デスクトップでは、固定されたdivがモーダルの底に固定されていることが期待されるように見えます。

例：
http://www.bootply.com/wkYieH2mpt

ただし、コンテンツをiPadで固定スクロールのdivを同じ例を開く場合。次に、ピンチを押してズームすると、バーが下部に再描画されます。

このようなiOS 5の問題が修正されて以来、私は印象に残っていました。CSS "position: fixed;" on iPad/iPhone?私はiOS 9.3.4を使用しており、ChromeとSafariの両方でテストしています。ここで

は、完全性についてのコードです：

HTML：

<!-- Button trigger modal --> 
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
    Launch demo modal 
</button> 

<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     <div class="content"> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel est eget elit gravida blandit quis non ipsum. Sed suscipit vulputate libero sit amet lacinia. Morbi tempus eleifend lectus, id dapibus arcu rutrum eu. Proin volutpat pretium diam at tincidunt. Sed a maximus odio. Pellentesque in aliquam nibh. Etiam blandit dictum metus, ac interdum risus gravida a. Vestibulum cursus imperdiet suscipit. Nunc non dui posuere, maximus nisi id, egestas ex. Aenean consectetur lacinia varius. Nulla sit amet convallis tortor. Integer at massa ante. Donec ultricies augue mauris, a gravida magna aliquet ac. Nunc suscipit urna lorem, eu sodales quam sodales in. 
       Pellentesque ut hendrerit ipsum. Nulla tristique tellus eu ex dictum semper. Mauris tempor orci vitae est pretium sagittis. In sodales ligula ac elit accumsan, a congue odio lobortis. Duis eleifend convallis urna sed bibendum. Aliquam dictum massa ac lectus fringilla, non pulvinar justo placerat. Etiam pretium sodales sem, a dictum turpis sagittis vitae. 
       Nam fringilla volutpat blandit. Nam nec risus dolor. In bibendum, velit ac lacinia auctor, turpis purus mollis neque, nec porta mauris lacus ac est. Fusce finibus, libero sed tincidunt luctus, nisi dolor posuere leo, et feugiat elit nisi condimentum dolor. Duis tempus orci a purus tristique, at bibendum velit euismod. Nam consectetur eget nunc ut dictum. Curabitur et nunc quis est cursus fringilla non vulputate purus. Nam a mollis arcu, eu dignissim augue. Pellentesque imperdiet varius dui, non rhoncus lectus convallis sed. Nam lacinia tortor ligula, eu porttitor dolor bibendum at. 
       Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse viverra gravida magna, non euismod ex volutpat non. Duis sit amet est magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque at tempor ipsum, non vulputate ipsum. Sed varius nisl eu dui dignissim consequat. Aenean ex lectus, finibus sit amet consequat sed, vulputate hendrerit erat. Sed sollicitudin enim eu elit posuere egestas. Etiam venenatis eros odio, ut fermentum erat pretium in. Aliquam posuere dapibus tincidunt. Phasellus mattis gravida sapien, ac malesuada nulla blandit sed. Aenean sem felis, molestie vel libero interdum, ultricies finibus lacus. Nullam faucibus dolor a felis dignissim, tempus mattis metus eleifend. In tempor in erat non molestie. Quisque sodales metus elit, sed ultrices urna euismod eu. 
     </div> 
     <div class="anchor"> 
     </div> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div> 
    </div> 
</div> 

CSS：

/* CSS used here will be applied after bootstrap.css */ 
.modal-dialog,.modal-content { 
    max-height: 95vh; 
    overflow: auto; 
} 
.modal-body { 
    padding: 0; 
    padding-bottom: 100px; 
} 
.modal-dialog { 
    margin: 2.5vh auto; 
} 
.anchor{ 
    width: 100%; 
    height: 50px; 
    background: red; 
    position: fixed; 
    bottom:0; 
} 

これはブラウザのバグですか、私は単に何かを明らかに不足しています？

Answer 1

私はそれは私が

background-attachment: fixed; 

プロパティを持っていたiOSのと同じ動作するので、ブラウザのバグだと信じたいです。私はそれを介してすべてを見てきたし、それがこのケースでは、しかし...

ばかりのiOSのことだ

.anchor{ 
    width: 100%; 
    height: 50px; 
    background: red; 
    position: fixed; 
    position: -webkit-sticky; 
    bottom:0; 
} 

仕事

例>>http://www.bootply.com/OQawSO3ycJ