У меня есть веб-страница, которая использует history.pushState с идентификаторами фрагмента (т.е. #Heading1) и jQuery animate для навигации внутри документа.
Вот как я перемещаюсь по местоположению в документе:
$('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'
});
Используя Google Chrome в iOS, адрес обновляется, как ожидалось, и анимация прокрутки отлично работает, но кнопки назад/вперед не попадают в идентифицированные теги.
Следует отметить, что при использовании кнопок "назад/вперед" URL-адрес в адресной строке изменяется. Он просто не подходит к идентифицированному тегу.
Я видел эту проблему только с помощью Google Chrome на iOS; iPhone и iPad.
Я создал Pen в CodePen с подмножеством моего кода, который должен продемонстрировать проблему: http://codepen.io/Ghodmode/pen/YqKGga
Update:
Я обновил ручку, чтобы сделать ее немного легче протестировать на iPhone/iPad. Вероятно, также лучше использовать представление отладки: http://s.codepen.io/Ghodmode/debug/YqKGga
Обновление 2:
Я создал еще одну страницу в CodePen, которая должна продемонстрировать проблему. На этот раз без jQuery: http://s.codepen.io/Ghodmode/debug/jqOqpq
Я еще не смог проверить это, потому что у меня нет прямого доступа к iPhone/iPad, но я действительно не думаю, что проблема имеет какое-то отношение к jQuery.
Он отлично работает:
Я должен, вероятно, отметить, что у меня лично нет каких-либо устройств iOS, чтобы проверить это, но у меня есть надежный тестер, отправляющий мне видео и скриншоты о любых проблемах.
Поскольку анимация работает так, как ожидалось, она не кажется проблемой jQuery.
В iOS есть небольшая ошибка с API истории HTML5.
Вы пробовали:
window.addEventListener("popstate", function(e) {
window.location.href = location.href;
});
Этот плагин может быть полезен (даже для фонового чтения) History.js. Он решает проблемы совместимости между браузерами, а также предоставляет дополнительный хеш-код HTML4, если вы хотите