Issue:
My site uses jQuery Mobile. I am using iframes to serve ads on my site.
Someone recently noticed that if a user clicks an ad (leaving my site) and then hits the back button to return to my site, then the ads, or specifically, the contents of the iframes serving our ads, get a bit jumbled. If I look at the DOM, I see the src of the iframes are correct, and pointing to the url I would expect, but the html within the iframes is flip-flopped. One iframe will have the content/html of a different iframe.
Reproducible:
I don't know why this happens, but I was able to re-create it using a bare-bones jQuery Mobile setup (see attachment)
I have 2 html files. Page 1 links to Page 2. Page 2 has a link to Google. Page 1 and Page 2 each have two iframes with unique src attributes.
If I navigate to Page 1 -> Page 2 -> Google, and then hit back, I see the iframes from Page 1 on Page 2. Everything else indicates that I am in fact on Page 2, and the src attributes on the iframes are correct, but somehow, the contents of these iframes are jumbled.
I'm able to reproduce this issue reliably if I start from Page 1 and do a hard refresh.
If I remove the jQuery Mobile code from the <head>, everything works fine
Workaround:
I do not understand why, but if I set a unique id on each iframe, then I have no issues. When I put ids on my iframes, then the iframes all have the correct content when using 'back' to return to my site from an external page.
I tested on multiple machines, browser, and a few mobile devices and confirmed this issue and fix.
I'm posting this here in case someone else runs into the same issue.