Running An Effect on Body Unload

I was recently asked to help with adding a page transition effect. JQuery makes tasks like this blazingly simple. Here is the source code for fading out the body when a link is clicked:

Concise and snappy code! Just the way I like it! But it didn’t work 100%. Would you believe the effect didn’t work well in one of the browsers?

When using the Firefox browser, the transition worked just fine but clicking the back button after the transition simply showed the greyed out page. Firefox browser cached the effect, rendering the whole page completely useless.

After some research, I found that the Firefox Browser uses a type of caching referred to as bfcache (for “Back-Forward Cache”). BFCache is on for most cases but is not activated under the following conditions:

• the page uses an unload handler
• the page sets “cache-control: no-store”
• the page sets “cache-control: no-cache” and the site is HTTPS.
• the page is not completely loaded when the user navigates away from it
• the top-level page contains frames that are not cacheable
• the page is in a frame and the user loads a new page within that frame (in this case, when the user navigates away from the page, the content that was last loaded into the frames is what is cached)

The cleanest solution for this case? Add an onUnload handler to the body tag:

Now the transition works flawlessly and the back button behavior is correct.