I have a web page that uses history.pushState
with fragment identifiers (i.e. #Heading1
) and jQuery's animate
method to navigate within the document.
This is how I navigate to a location in the document:
$('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'
});
Using Google Chrome on iOS, the address is updated as expected and the scroll animation works fine, but the back / forward buttons don't go to the identified tags.
I should note that when using the back / forward buttons, the URL in the address bar is changed. It just doesn't go to the identified tag.
I've only seen this problem using Google Chrome on iOS; both iPhone and iPad.
I've created a Pen at CodePen with a subset of my code that should demonstrate the problem: http://codepen.io/Ghodmode/pen/YqKGga
Update:
I've updated my pen to make it a little easier to test on an iPhone / iPad. It's probably also better to use the debug view: http://s.codepen.io/Ghodmode/debug/YqKGga
Update 2:
I've created another page at CodePen that should demonstrate the problem. This time, without jQuery: http://s.codepen.io/Ghodmode/debug/jqOqpq
I haven't been able to test this yet because I don't have direct access to iPhone / iPad, but I really don't think the problem has anything to do with jQuery.
It works fine on:
I should probably note that I don't personally have any iOS devices to test this on, but I do have a reliable tester sending me videos and screenshots of any problems.
Since the animation works as expected, It doesn't seem like a jQuery problem.
replaceState() The History. replaceState() method modifies the current history entry, replacing it with the state object and URL passed in the method parameters. This method is particularly useful when you want to update the state object or URL of the current history entry in response to some user action.
This API allows you to manipulate the browser history via script. You can change the URL in the browser without triggering a page refresh, and also listen for when a user presses the back button.
In an HTML document, the history. pushState() method adds an entry to the browser's session history stack.
iOS has a fair few bug with the HTML5 History API.
Have you tried:
window.addEventListener("popstate", function(e) {
window.location.href = location.href;
});
This plugin may be of some use (even for background reading) History.js. It solves the cross-browser compatibility problems and also provides an optional HTML4 hash fallback if you'd like
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With