location.hash seems to be utterly broken in Safari 4: It can be set initially, but cannot be set in any event as far as I can tell, whether that event is triggered by a user action or a timer.
Here’s an example (I use jQuery here for brevity, but I can’t imagine that this problem is jQuery-specific):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<!-- Include jQuery -->
</head>
<body>
<div id="test">Click the link below to make this text bold.</div>
<p><a href="#test">Bold it!</a></p>
<p id="hashValue"></p>
<script>
$(document).ready(function() {
location.hash = '#normal'; // this works in all browsers
$('a').click(function() {
$('#test').css({'font-weight': 'bold'});
location.hash = '#bold'; // this fails in Safari 4
return false; // prevents link href from affecting hash
});
setInterval(function() {
if (! location.hash.match('bold$')) {
$('#test').css({'font-weight': 'normal'});
}
$('#hashValue').html(location.hash);
}, 100);
});
</script>
</body>
</html>
In Firefox, the behavior is what you’d expect: When you load the page, the hash is set to #normal. When you click the link, the text becomes bold and the hash is set to #bold. Because the hash has been changed, the interval function has no effect. If you change the hash in the address bar to something else (that doesn’t end in bold), the text gets un-bolded. This lets the back button work intuitively: Click back to where the hash is #bold, and the text becomes bold. Click to anywhere else, and the text is un-bolded.
But in Safari 4, the behavior is: When you load the page, the hash is set to #normal. And then it will stay that way forever, as far as the address bar is concerned. When you click the link, the text will become bold, and will stay that way, even though the hash in the address bar hasn’t changed. So, location.hash is changed internally (as the hashValue paragraph reflects). This inconsistency with the address bar has dire consequences: If you click the back button, the text is un-bolded; but if you click the forward button after that, it doesn’t get re-bolded! This totally breaks JavaScript history libraries, such as the jQuery history plugin.
Any fixes? Any workarounds? I tested this in Safari 4.0.1 on a Mac.
It turns out that this wasn’t a bug in Safari at all, but rather in Glims, a plug-in I was using:
Link
Removing the plugin fixed the problem. I didn’t consider this as a possibility because I have no idea why Glims would mess with JavaScript’s interaction with the address bar.
Reinstalling the latest build, it seems not to suffer from this problem.