Bootstrap Affix menu within a pushed column overla

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, open this jsfiddle in Safari and start to scroll down the page: http://jsfiddle.net/davereed362205122/8bZxb/2/

The scenario:

I have a two column page setup with a right column menu and the following div:

<div class="col-md-push-9 col-md-3"> 

(The menu needs to show up at the top on mobile devices, hence the push)

Within that div is the affix menu:

<div id="affix-menu" data-spy="affix" >

The main content area is within a div like this:

<div class="col-md-9 col-md-pull-3">

Everything works really well in Firefox and Chrome, but for some reason in Safari the affix portion does not stay confined to the div and overlaps the main content. Taking a look at Bootstrap's own site (http://getbootstrap.com/javascript/#affix), it appears they don't use any push or pulls for their divs, so the menu simply shows up at the bottom in mobile. I'm hoping I don't have to revert to this...

Answer 1

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."

Answer 2

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>