滚动时，推送列中的 Bootstrap Affix 菜单与 Safari 中的主要内容重叠

这可能是 Bootstrap 本身的一个错误，但我仍然有兴趣看看是否有人可以提出修复或至少提供一些帮助。

要直接跳到问题所在，请在 Safari 中打开此 jsfiddle 并开始向下滚动页面：http://jsfiddle.net/davereed362205122/8bZxb/2/

场景：

我有一个两列页面设置，带有右列菜单和以下 div：

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

（菜单需要显示在移动设备的顶部，因此需要推送）

该 div 内是附加菜单：

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

主要内容区域位于 div 内，如下所示：

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

在 Firefox 和 Chrome 中，一切都运行得很好，但由于某种原因，在 Safari 中，附加部分并不局限于 div 而是与主要内容重叠。看看 Bootstrap 自己的网站（http://getbootstrap.com/javascript/#affix），看来他们的 div 没有使用任何推或拉，因此菜单只是显示在移动设备的底部。我希望我不必再回到这个...

我们想出的最佳解决方案是隐藏附加列并在其他地方显示相同的内容。而不是通过推拉来错误地重新排序列。

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