Fixed-Element in Bootstrap Modal scrollt nicht

Question

Ich habe ein Bootstrap-modal zu, wo anstatt es die Seite überläuft und die Seite zu scrollen, passt stattdessen auf die Seite passt und ermöglicht den Inhalt zu scrollen. Dann setze ich innerhalb des Modalkörpers eine feste Position div mit position: fixed; bottom: 0; (ich möchte diesen Code im Körper behalten, weil ich ihn dynamisch bevölkere).

Auf dem Desktop können Sie sehen, dass es wie erwartet funktioniert, mit der festen div an der Unterseite des Modal verankert.

Beispiel:
http://www.bootply.com/wkYieH2mpt

Wenn Sie jedoch öffnen Sie das gleiche Beispiel auf einem iPad den festen div scrollt mit dem Inhalt auf. Dann, wenn Sie dann die Leiste ziehen, um den Balken neu zu zeichnen, wie erwartet.

Ich hatte den Eindruck, dass seit iOS 5 solche Probleme behoben wurden: CSS "position: fixed;" on iPad/iPhone? Ich benutze iOS 9.3.4 und habe sowohl in Chrome als auch in Safari getestet. Hier

ist der Code, der Vollständigkeit halber:

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; 
} 

Ist das ein Browser Bug oder bin ich einfach etwas fehlt offensichtlich ?

Answer 1

Ich würde glauben, dass es ein Browser Bug ist, da das gleiche Verhalten auf ios mit Ich habe

hatte

background-attachment: fixed; 

Eigenschaft. Ich habe alle durch gesucht und es ist nur eine Sache .. ios

jedoch in diesem Fall

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

Sollte die Arbeit machen

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