Over the past week, I’ve been noticing some strange behavior on pages that embed both the Twitch live stream and chat. When embedded on a page once both the iframes have finished loading, a new entry is added to the browser history, requiring the user to navigate back twice instead of once to get to a page that landed them on a page with these 2 embeds. I’ve noticed this issue my personal projects but also in a number of web apps that embed twitch streams and chat.
I’ve prepared a pretty simple codesandbox with react and react-router demonstrating the issue:
- https://codesandbox.io/s/twitch-embed-test-g1p4i <- sandbox with the repro code
- https://csb-g1p4i-2yzr7xmzp.now.sh/ <- production build of the sandbox code deployed to vercel for easier reproduction (I was able to reproduce the issue in incognito mode on this deployed version every time).
Something to note is that the issue is only reproducible, once both the live stream embed and the chat have finished loading and does not appear reproducible if only one of the 2 frames is being rendered.
