Back button doesn't work in Firefox when using the dataURL feature

[robertpateii]

Hello again,

Works fine in Chrome, but the old broken behavior is back in Firefox and IE. This happens:

1. Load the page.
2. Click a link.
3. Click back.
4. Note the URL changes back, but your position doesn't move.

This may actually turn out to be "by design" since at the end of those steps you are at your last position on the page reflected by the URL bar. That it works like I want it in Chrome is probably a Chrome bug.

I think I could fix this by adding the onpopstate from #18 back, but I don't have time to do appropriate testing tonight. I also want to think about other scenarios besides my personal site in which "fixing" this may cause problems. I'll try to figure it out this weekend.

Thanks,

Robert

p.s.
I think this is unrelated, but I should also remove the check for history.pushState in updateURL() since that function no longer calls history.pushState as of version 2.17.

[cferdinandi]

@robertpateii - I think I know what's happening here. Smooth Scroll moves the user to the anchor target, and then updates the hash. If you click the back button to the unhashed URL, as far as Firefox is concerned, the starting position is at the current anchor, since that was it's last position before the has was updated.

In other words, your original fix, using history.pushState with onpopstate, is probably the best solution. It also frees us up to something like @agarzola suggests in this request, in which the user can control when the URL is updated (either before or after the scroll).

[cferdinandi]

@robertpateii - this has been fixed in version 2.18. Turns out that window.onpopstate wasn't even needed. Running the hash update before the animation (per #27) fixes the Firefox quirk that was breaking the behavior in the first place.

[robertpateii]

I was excited to read your comment, but when I tested it I found that now it's broken in Chrome. :( Adding onpopstate back fixes it Chrome and doesn't hurt Firefox.

    window.onpopstate = function(event) {
        // Make back button return to top when used after clicking the first smooth scroll link.
        if (event.state === null && window.location.hash === "") {
        window.scrollTo(0,0);
        }
    };

[cferdinandi]

What the ---! Done. Thanks for the catch, @robertpateii.