Question

I have a very simple test case that explains the problem.

Here’s the page that I’m displaying in Rails in an ERB file.

<div><%=rand%></div>

<p><a href="http://google.com">Go</a></p>

To show the error, I load the page. I note the random number displayed as rand1. I click on the Google link. I click the browser’s “Back” button. I note the random number displayed as rand2.

Here’s the problem:
In Firefox and Chrome, rand1 != rand2 (always).
In Safari and IE, rand1 == rand2 (always).

Why the discrepancy in browsers? Why is Safari and IE caching the output from Rails while the other two browsers are not? How do I get Safari and IE to refresh the page?

(This is a simple test case to show the problem – this has implications in my Backbone application).

Answer 1

WebKit in particular has an aggressive page caching strategy for handling exactly the case you’re describing (clicking a link and then immediately clicking the back button). The idea is to make the back action happen almost instantaneously by caching not just the resources but also the DOM and other state of the page. You can read about it in these two articles:

• WebKit Page Cache I — The Basics
• WebKit Page Cache II — The unload Event

You may be able to use a combination of the load/unload and pageshow/pagehide events to accomplish what you need.

I’m not sure if IE implements something similar to WebKit, but maybe this will fix it too.