Safari position:fixed not compatible with push/pull columns

Created by: enbo

Objects with position: fixed do not get pulled or pushed like they should be when col-xs-push-6 or any other pull/push classes are used when viewing in iOS 8.4 Safari. This is not an issue in Explorer, Chrome, Opera, or Firefox to my knowledge.

You can see that the paragraph with "affix" is not pushed to the right like it should be in the example below. Depending on the viewport, the paragraph may be covered by the background color of the left column, since it comes later in the HTML.

http://jsbin.com/kuzenonexe/1/edit?html,css,output http://jsbin.com/dakenacazi/1/edit?html,css,output

HTML:

<div class="container-fluid">
    <div class="row">
        <div id="pushed-col" class="col-xs-push-3 col-xs-9">
            <p>
                This is a paragraph.
            </p>
            <p class="affix">
                This is a paragraph with "affix". In a desktop browser, you can scroll to verify that its position is fixed.
            </p>
            <div class="extended-col">
            </div>
        </div>
        <div id="pulled-col" class="col-xs-pull-9 col-xs-3">
            <p>
            This is a paragraph from a column lower in the document.
            </p>
            <div class="extended-col">
            </div>
        </div>
    </div>
</div>

CSS:

#pulled-col {
  background-color: #ee9999;
}
#pushed-col {
  background-color: #99eeee;
}
.extended-col {
  display: block;
  content: "";
  height: 100vh;
}