고정 위치 navbar는 iOS5의 모바일 Safari에서만 한 번 클릭 할 수 있습니다.

iPad 최적화 웹 사이트 스타일에 Twitter Bootstrap을 사용 중이며 iOS5의 Mobile Safari에서 재미있는 버그에 맞서 있습니다.고정 위치 navbar는 iOS5의 모바일 Safari에서만 한 번 클릭 할 수 있습니다.

고정 위치 navbar에서 앵커 링크를 탭하면 해당 앵커로 정확하게 이동합니다. 그러나, 나는 페이지를 스크롤 할 때까지 navbar의 다른 링크를 클릭 할 수 없다. 이 문제를 해결하는 방법에 대한 http://twitter.github.com/bootstrap/

어떤 제안 :

문제는 부트 스트랩 사이트에 동일한 문제를 가지고 있기 때문에, 부트 스트랩 자체에있는 것으로 나타 납니까?

아래 코드는 문제를 재현합니다. "Test JS"또는 "Test jQuery"(두 가지 유형의 스크롤, 직선 JS 또는 jQuery 기반)을 클릭하면 수동으로 페이지를 이동 한 후에야 다시 클릭 할 수 있습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
    <head> 
     <style type="text/css"> 
      #testDiv { 
       position: fixed; 
       bottom: 0; 
       right: 0; 
       background: gray; 
       padding: 20px; 
      } 
      #jsDiv, 
      #jQueryDiv { 
       width: 200px; 
       display: block; 
       height: 40px; 
       background-color: red; 
      } 
      #jQueryDiv { 
       background-color: yellow; 
      } 
     </style> 
     <script type="text/javascript"> 
      function testScroll() { 
       alert("JS"); 
       scroll(0, 5000); 
      } 
      function testjqScroll() { 
       alert("JQuery"); 
       $(window).scrollTop(500); 
      } 
     </script> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script> 
    </head> 
<body> 
    <%for (int i = 0; i < 500; i++) {%> 
    Line <%=i%><BR/> 
    <%}%> 
    Bottom 
    <div id=testDiv> 
     <a id="jsDiv" href="#" onclick="testScroll();return false;">Test JS</a> 
     <a id="jQueryDiv" href="#" onclick="testjqScroll();return false;">Test jQuery</a> 
    </div> 
</body> 
</html>

출처

2011-10-19 Joshua Clanton

동일한 문제가 있습니다. 지금까지는 해결책이 없습니다. – Stuiterbal

비슷한 문제가 있습니다. 누군가? – emilolsson

-2

저도 같은 문제를 가지고 :

다음은 기본 데모 코드 (.jsp로)입니다. <body> 태그 또는 막대 바로 앞에있는 요소 (탐색 바 또는 상단 바)에 padding-top을 최소한 40px 개 적용해야합니다.

출처

2011-12-29 19:53:13 Pabluez

나는 당신의 고통을 느낍니다. 나는 적어도 6 시간을이 것을 고치려고 노력했다. 그러나 나는 적어도 나를 위해 효과가 좋은 해결 방법을했다.

헤더가 많은 고정 된 헤더가 네비게이션과 함께 있습니다. body/html이 아래로 위로 스크롤됩니다. (일반적)

내비게이션 버튼을 클릭하면 페이지가 스크롤되고 효과적으로 내 몸을 내 손가락으로 다시 스크롤 할 때까지 효과적으로 내 버튼을 죽입니다. 이것은 어떻게 든 내 버튼을 다시 클릭 할 수있게합니다. 나는 모든 것을 시도했지만 아무도 그것을 해결하지 못하거나 결과를 공유하지 못했습니다.

는 HTML :: 내 컨테이너 사업부의 끝에서 , 나는 폭이 더 높이/

<div id="device"></div> 

</div> <!--! end of #container -->

JS ::이 그냥 스크롤 애니메이션하기 전에, 내가 줄과 빈 DIV 추가 200px의 div 높이.

$('#device').css('height', '200px');

즉시 애니메이션의 전체에, 그것을 분리 될

$('#device').css('height', '0px');

높이를 가지고. 달콤한 해킹 마술. 도움이되기를 바랍니다. 실례를 원한다면 http://ryanore.com 현재 진행 중이므로 일반적으로 링크를 걸지는 않겠지 만 좋은 이유가 있습니다.

출처

2012-04-05 14:11:03

숫자 '200px'는 임의적이며 내 상황에서는 잘 작동하는 것으로보아야합니다. 당신은 가치가있는 것을 작동시킬 때까지 그 값으로 바이올린을 칠할 필요가 있습니다. –

FWIW, 이것은 나를 위해 작동하지 않았다. 그런 성가신 버그! – weotch

저를 위해서 일해주었습니다. 감사! – Mac

여기 해결책은 http://xybrary.appspot.com/입니다.

나는 이것이 최선이라고 말하지는 않지만 더 좋은 것을 찾을 수 없었다. @ Ryan Ore의 해결책을 iOS 5.1에서 자신의 웹 사이트를 방문하여 시도했지만 그의 문제는 전혀 수정되지 않았습니다.

기본적으로 고정 된 위치와 큰 z- 인덱스, 두 번째 절대 위치, 낮은 z- 인덱스 (물론 다른 CSS 클래스)의 고정 된 navb가 두 개 만들어졌습니다. 원본과 복제본이 서로 겹쳐서 표시됩니다.

출처

2012-06-22 12:45:41 Chris

이 글을 게시 해 주셔서 대단히 감사합니다. 왜 내 것이 더 이상 나를 위해 일하지 않는지 잘 모르겠습니다. 실수로 내 코드를 읽었을 수도 있습니다. 나는 그것이 잠시 동안 위대한 일을하고 있었다는 것을 압니다. 다시보고 할 것입니다. –

예, 실제로 CSS를 사용하고 다시 작업하고 있습니다. 왜 당신에게 효과가 있는지 모르겠지만 다른 해결 방법을 발견하게되어 기쁩니다. 나는 그것을 시험해 보지 않았다. 그러나 헤이, 그것이 작용하면 그것은 굉장하다. –

우리에게 @ Ryan Ore를 알리게 해줘서 고마워. 사람들이 너의 접근 방식을 연구하고 끝내고, 내가 궁금해 할뿐만 아니라 스스로를 보게 될 것이라고 확신한다. – Chris

고정 위치 navbar는 iOS5의 모바일 Safari에서만 한 번 클릭 할 수 있습니다.

답변

관련 문제