WebKit is Dropping HTML5 "popstate" Events

There's a bug in the HTML5 "popstate" event, as implemented in WebKit (Safari and Chrome). View this page in one of those browsers. Your browser has had history entries added from #0 to #19 (you should start at #19). Hitting back/forward will navigate through these. On each URL, the large number above should reflect the hash value. If you hit back/forward quickly, you'll notice that your number gets out of sync with the URL. This is because WebKit is dropping popstate events (they are not firing). It seems to happen when outbound network requests are in progress when the user navigates in their browser happens. In this case, your browser is downloading an image that takes 1s to serve on every popstate, so you'll have to wait 1s between backs/forwards to have the feature work correctly. You could also cause constant network traffic by putting an image download in a setInterval, in which case your popstate events will never fire. This implementation simulates an AJAX application that makes a network request when you navigate between URLs using pushState/popstate. View the source for more info.

This was filed as Bug 42940 with WebKit on July 24, 2010. The Firefox 4 beta does not have this bug, which is good news.

This is put together by Ben Cherry. Ben is a front-end engineer at Twitter, and you can follow him at @bcherry.

This bug was fixed in History.js by Benjamin Lupton. Benjamin is a freelance web 2.0 consultant, and you can follow him at @balupton.