푸시 된 열 내의 부트 스트랩 Affix 메뉴가 스크롤 할 때 Safari의 주 콘텐츠와 겹치다

Question

이것은 부트 스트랩 자체의 버그 일 수 있지만 여전히 수정 사항이 있는지 또는 적어도 도움이되는지 알고 싶습니다.

이 문제로 바로 이동 사파리에서이 jsfiddle을 열고 페이지를 아래로 스크롤 시작하려면 : http://jsfiddle.net/davereed362205122/8bZxb/2/

시나리오 :

나는 오른쪽 열에 메뉴와 함께 두 개의 열 페이지 설정을 가지고 다음 DIV :

가

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

(메뉴 휴대 기기 상단에 표시 할 필요가있다, 그러므로, 푸시)

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

주요 내용 영역이 같은 사업부 내에 : 해당 사업부 내에서 14,는 접사 메뉴입니다

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

모두가 파이어 폭스와 크롬에 정말 잘 작동하지만 사파리에서 몇 가지 이유 접사 부분은 div에 국한되지 않고 주 콘텐츠와 겹치지 않습니다. 부트 스트랩 자신의 사이트 (http://getbootstrap.com/javascript/#affix)를 살펴보면 div에 대한 푸시 또는 풀을 사용하지 않는 것 같아 메뉴가 모바일의 하단에 표시됩니다. 나는 이걸 되돌릴 필요가 없길 바래 ...

Answer 1

아직 코멘트가 없으므로이 문제에 대한 추가 참조는 반드시 대답이되는 것은 아닙니다.

mdo는 github https://github.com/twbs/bootstrap/issues/12126에 관한 문제를 말하고 있지만 "이 문제를 해결하려면 클래스를 적절하게 적용하는 것이 좋습니다."

Answer 2

우리가 생각해 낸 가장 좋은 해결책은 첨부 된 열을 숨기고 다른 곳에서 동일한 콘텐츠를 표시하는 것이 었습니다. 푸시와 당김으로 열을 잘못 주문하는 대신

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