Bootstrap Affix menu within a pushed column overlaps main content in Safari when scrolling

Question

This might be a bug within Bootstrap itself, but I\'m still interested to see if anyone can come up with a fix or at least some help.

To jump straight to the issue,

Answer 1

The best solution we came up with was to hide the affixed column and show the same content elsewhere. Instead of falsely re-ordering the columns with pushes and pulls.

<section class="visible-xs">
    NORMALLY AFFIXED CONTENT
</section>
<section class="col-sm-8">
    MAIN
</section>
<section class="col-sm-4 hidden-xs">
    <div id="affix-menu" data-spy="affix" >AFFIXED CONTENT</div>
</section>

Answer 2

Cannot comment yet so this is additional reference on the problem not necessarily an answer.

mdo says its an issue on github https://github.com/twbs/bootstrap/issues/12126 but then fat closed it saying "...to get around this you'd just have to make sure that you are styling the classes applied appropriately."