Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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:

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

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.

like image 471
Vince Avatar asked Feb 25 '16 07:02

Vince


People also ask

What is window history replaceState?

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.

What is html5 pushState?

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.

What is history pushState in angular?

In an HTML document, the history. pushState() method adds an entry to the browser's session history stack.


1 Answers

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

like image 100
Oam Psy Avatar answered Oct 18 '22 19:10

Oam Psy