Chrome changes document.title to URL

Question

i have an AJAX driven website/webapp and use HTML5's history API to control browser URL, back-buttons ect.

The URL is einzelstueck-shop.com

On initial page load, i determine the URL path to get the home section via AJAX. This is pretty simple:

if(!target) {
    target = removeSlash(window.location.pathname);
}

if(target == '' || target == '/') {
    target = 'home';
}

Then i do my AJAX stuff and if successfull, i do this:

// change doc title & history
var title = $('.slide-button[data-nav-target="'+data.target+'"]').attr('data-nav-title');
console.log(title);
document.title = title + ' - Einzelstück';
window.history.pushState("", document.title, data.target);
console.log('History code is executed, current document.title is: ' + document.title);

Now, the title variable is the value of data-attributes I gave to all elements that trigger a navigation change. The title is 100% correct. I put in a console.log to show it. data.target is the original target passed from the AJAX call.

Everything works in FF and IE. In Chrome, if you access the site without a path, e.g. einzelstueck-shop.com or einzelstueck-shop.com/, i successfully get redirected to /home and the title changes to Home - Einzelstück for a brief second. But then it changes the document.title to the current URL. And i don't get why.

I removed all other code but this still happens. There is no other place in the app where the document.title could be changed. This only happens on initial page load. Using the navigation or accessing the site with a path e.g. einzelstueck-shop.com/home or einzelstueck-shop.com/ringe everything works as expected.

Answer 1

I solved this by ditching the HTML History API and using history.js

Normally I'd stay with the HTML5 version but as history.js follows the HTML5 API as much as possible and it fixes other issues (e.g. IE9), i gave it a go.

My issue probably will be fixed with some chrome update without anyone noticing.