I've modified a Bootstrap modal to where instead of it overflowing the page and allowing the page to scroll it instead fits to the page and allows the content to scroll. Then inside the modal body I set a fixed position div with position: fixed; bottom: 0; (I'd like to keep this code in the body because of how I dynamically populate it).
On desktop you can see that it works as expected, with the fixed div anchored to the bottom of the modal.
Example:
http://www.bootply.com/wkYieH2mpt
However, if you open the same example on an iPad the fixed div scrolls up with the content. Then if you then pinch to zoom the bar redraws at the bottom as expected.
I was under the impression that ever since iOS 5 issues like this have been fixed: CSS "position: fixed;" on iPad/iPhone? I am using iOS 9.3.4 and tested in both Chrome and Safari.
Here is the code for completeness:
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;
}
Is this a browser bug or am I simply missing something obvious?
