jquery - Chrome en iOS; atrás/adelante no funciona con history.pushState?

html5 google-chrome

Question

Tengo una página web que utiliza history.pushState con identificadores de fragmentos (es decir, #Heading1 ) y el método animate de jQuery para navegar dentro del documento.

Así es como navego a una ubicación en el documento:

$(''nav a'').click(function(e){
  e.preventDefault();
  var href = $(this).attr(''href'');
  history.pushState(null, null, href);
  $(''#address'').val(location.pathname + href);

  $(''html, body'').animate({
    ''scrollTop'': $(href).offset().top + ''px''
  });

Al usar Google Chrome en iOS, la dirección se actualiza como se esperaba y la animación de desplazamiento funciona bien, pero los botones de avance / avance no van a las etiquetas identificadas.

Debo tener en cuenta que al usar los botones de avance / retroceso, se cambia la URL en la barra de direcciones. Simplemente no va a la etiqueta identificada.

Solo he visto este problema usando Google Chrome en iOS; Tanto iPhone como iPad.

He creado una pluma en CodePen con un subconjunto de mi código que debería demostrar el problema: http://codepen.io/Ghodmode/pen/YqKGga

Actualizar:
He actualizado mi pluma para que sea un poco más fácil de probar en un iPhone / iPad. Probablemente también es mejor utilizar la vista de depuración: http://s.codepen.io/Ghodmode/debug/YqKGga

Actualización 2:
He creado otra página en CodePen que debería demostrar el problema. Esta vez, sin jQuery: http://s.codepen.io/Ghodmode/debug/jqOqpq

Todavía no he podido probar esto porque no tengo acceso directo a iPhone / iPad, pero realmente no creo que el problema tenga nada que ver con jQuery.

Funciona bien en:

• Safari en iPhone / iPad
• Google Chrome en Android
• Mozilla Firefox en Android
• Google Chrome en Windows
• Mozilla Firefox en Windows
• Internet Explorer en Windows

Probablemente debería tener en cuenta que personalmente no tengo ningún dispositivo iOS para probar esto, pero sí tengo un probador confiable que me envía videos y capturas de pantalla de cualquier problema.

Dado que la animación funciona como se esperaba, no parece ser un problema de jQuery.

Answer 1

iOS tiene algunos errores con la API de historial de HTML5.

Has probado:

window.addEventListener("popstate", function(e) {
    window.location.href = location.href;
});

Este complemento puede ser de alguna utilidad (incluso para la lectura en segundo plano) History.js . Resuelve los problemas de compatibilidad entre navegadores y también proporciona una opción de hash HTML4 opcional si lo desea