The Back Button Is Part of the Design

A page can make a good first impression and a very strange second one.

While refining this site’s animation playground, I had to fix what happened when someone left and came back. The carnival needed to remember the selected shape and keep its controls working. Apparently, admission should include reentry.

The problem came from cleanup code. It treated leaving the page as permission to pack everything away. The browser had other plans.

Leaving Isn’t Always Finishing#

The browser’s back/forward cache can preserve a page for a later return. That means the page may resume with its existing state instead of starting from scratch.

My playground loader ran cleanup on pagehide, removing the behavior that made the controls work. When the browser preserved that document, it could bring back a page whose controls had already been dismantled. The booths were still there. Everyone running them had gone home.

The fix was small: check the event’s persisted flag and skip that teardown when the browser is keeping the page for possible reuse.

The cleanup listener also needed to stay attached. A cached departure should not use up its one chance to handle a later departure that actually needs cleanup.

Remember the Shape, Recheck the Theme#

Keeping everything exactly as it was would solve only half the problem.

If someone selects a star in the playground, visits another page, and comes back, the star should still be selected. That choice belongs to the interaction they left behind.

But if they change the site to dark mode while they’re away, the restored page should pick up that preference. Nobody asked the back button to bring back the lighting.

The theme controls now reread the saved preference on a cached pageshow and synchronize both the page theme and the selected button.

That became the useful design distinction: preserve the local interaction, and refresh preferences that may have changed elsewhere.

Take the Round Trip Twice#

The browser tests now select a shape, leave the playground, return from the cache, and select another shape. Then they do it again. They also check that changing the theme on another page carries through when returning.

The second trip matters. A listener that disappears after the first departure can make one successful return look more reassuring than it deserves.

These tests check that a cached restore actually happened, so a fresh page load cannot quietly take credit. The cache-specific coverage runs in full Chromium; it is one focused check alongside the broader browser tests.

I usually review a page by opening it. This work added another habit: leave, then come back, then press something.

The return trip is part of the interface too. The carnival should still be open.