CODEWITHSUNDEEP
jqueryioshtmlgoogle-chromepushstate
Vince
Vince

Reputation: 4232

Chrome on iOS; back/forward doesn't work with history.pushState?

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.

Upvotes: 17

Views: 5319

Answers (1)

Oam Psy
Oam Psy

Reputation: 8663

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

Upvotes: 1

Related Questions