Incorrect Demo Loading

[sctteea]

In Chrome (haven't tested in other browsers) when clicking back button to go back to demo's page then loading another demo, the first demo shows up even though the url is for the second demo. You have to refresh to actually see the new demo.

This only happens for demos withins /demos/* permalink structure.

Steps to reproduce:

• Go to http://davidwalsh.name/demos
• Click "View Demo" for pointer Media Query
• Click back in browser
• Click "View Demo" for Vibration API
• See the pointer Media demo is loaded even though on the vibrate.php url

[olimortimer]

Same here.

However, the first demo I went to didn't load anything - http://davidwalsh.name/dw-content/css-calc.php Then the Vibration API demo loaded ok (although sent me to the bottom of the page). Then any further demos would load Vibration API until I reloaded.

[darkwing]

This one is frustrating because it's been difficult for me to reproduce, though I've seen it in the past. Chrome is the one browser that I've noticed it in periodically so I'll keep an eye on it.

[sctteea]

Out of curiosity I played with it a little more noticed that I could reproduce it in Firefox on Mac as well. Looking at Firebug I noticed that each subsequent demo loads in an iframe below the last but both keep the "fadein" class and therefor remain opaque and viewable. So while the new one is loading its sitting behind the last one.

<div class="demoIframeHolder">
    <iframe src="http://davidwalsh.name/demo/pointer-media-query.php?" ... class="demoIframe fadeIn" ...></iframe>
    <iframe src="http://davidwalsh.name/demo/vibrate.php?" ... class="demoIframe fadeIn" ...></iframe>
</div>

[chromepenguin]

I have this same problem. I visited your CSS Ellipsis article, viewed the demo, went back (via the browser back button), saw a link to your CSS Filters article, clicked it, and when trying to view the CSS Filters demo it shows me the CSS ellipsis demo but with broken headers and footers.

Using Firefox 18.0.2.