iOS Safari: los anclajes dentro de un elemento posicionado fijo solo funcionan una vez

Por favor, eche un vistazo a este violín: http://fiddle.jshell.net/ikmac/q7gkx

Utilice este enlace para probar en el browser: http://fiddle.jshell.net/ikmac/q7gkx/show/

HTML:

<div class="nav"> <a href="#test1">test1</a> <a href="#test2">test2</a> <a href="#test3">test3</a> </div> <div id="test1" class="test">test1</div> <div id="test2" class="test">test2</div> <div id="test3" class="test">test3</div> 

CSS:

 .nav { position: fixed; top: 20px; left: 0; width: 100%; height: 20px; background: #000; } .nav a { float: left; font-size: 20px; color: #fff; } #test1 { margin-top: 1000px; height: 1000px; background: networking; } #test2 { height: 1000px; background: blue; } #test3 { height: 1000px; background: green; } 

Esto es lo que sucede en Safari en iOS 5.0 (4.3 no admite la position fija):

La primera vez que hago clic en uno de los anclajes, la página salta al anclaje correcto. Después de eso, ya no puedo hacer clic en uno de los otros enlaces. Cuando me desploop hacia arriba o hacia abajo un poco, los enlaces se vuelven clicable de nuevo.

Todos los demás browseres de escritorio se comportan bien.

¿Alguien ha tenido este problema antes o sabe cómo solucionarlo?

También tengo ese problema. Y la resolví medio dejando que JavaScript haga el desplazamiento del browser cuando se hace clic en un ancla de navigation. Y debido a que el desplazamiento táctil normal no da un evento hasta que el dedo se suelta de la pantalla, uso la position: fijo, lo que hace que el desplazamiento táctil sea más agradable que javascript, vea manzanas sitio dev .

No es la solución definitiva, pero en mi opinión es mejor que no funcionar en absoluto. Este script también comtesting el ancho de la window para asegurarse de que solo se aplica a pantallas más pequeñas, así, dispositivos.

Aquí está mi código, y si lo encuentra útil, hágalo mejor o encuentre una solución mejor, por favor comparta 🙂

 /* NAV POSITION */ var specScroll = false; // If special scrolling is needed /* Check what kind of position to use.*/ (function navPos() { var width = checkWidth(); if (width <= 480 || navigator.userAgent.match(/iPad/i) != null) { specScroll = true; }else{ specScroll = false; window.onscroll = NaN; } })(); $(window).resize( function(){ navPos(); } ); // After resizing, check what to use again. /* When clicking one of the nav anchors */ $(function() { $('a').bind('click',function(e){ var $anchor = $(this); if(specScroll){ $('#nav').css('position', "absolute"); window.onscroll = anchorScroll; } $('html, body').stop().animate({ scrollTop: $($anchor.attr('href')).offset().top }, 700,'easeOutExpo', function(){ if(specScroll){setTimeout("window.onscroll = touchScroll;", 100);} // the set timeout is needed for not overriding the clickability of the anchors after anchor-scrolling. }); e.preventDefault(); }); }); /* While the user clicks and anchors in nav */ function anchorScroll() { $('#nav').css('top', window.pageYOffset); } /* the first time the user scrolls by touch and lift the finger from screen */ function touchScroll() { $('#nav').css('position', 'fixed'); $('#nav').css('top', 0); window.onscroll = NaN; } /* CHECK WIDTH OF WINDOW */ function checkWidth() { myWidth = 0; if( typeof( window.innerWidth ) == 'number' ) { myWidth = window.innerWidth; //Non-IE } else if( document.documentElement && ( document.documentElement.clientWidth ) ) { myWidth = document.documentElement.clientWidth; //IE 6+ in 'standards compliant mode' } else if( document.body && ( document.body.clientWidth ) ) { myWidth = document.body.clientWidth; //IE 4 compatible } return myWidth; } 

Utilizo esta solución en una página de proyecto, pruébela: dare.niklasek.se

Me encontré con el mismo problema usando una navigation de position fija que desplaza al usuario por la página usando la animation jQuery. Lo que encontré es que a pesar de que el elemento de position fijo está visible en la nueva position, inspeccionarlo con js informa que todavía está de vuelta en la position original hasta que el usuario mueve la pantalla manualmente. Hasta entonces, a pesar de que la nave está allí visualmente, no se puede tocar para interactuar con ella. Más información y demo aquí: http://bit.ly/ios5fixedBug