I have product pages on my site that have an iframe on them. The presence of the iframe is messing up the browser history - the current page gets added to the history stack, and when I click the back button the page remains the same, I have to click twice to get to the actual previous page (and I have to click quickly, or else the page gets added to the stack again). I have isolated this as the problem because when I remove the entire iframe, the issue goes away; it is also resolved when I remove the src on the iframe.

<iframe sandbox="allow-same-origin allow-scripts" class="add-to-cart__iframe" id="addtocartiframe" src="https://buy.website.com/en/addtocart/#/addToCart/109ATCA714-1003R/71cbba730b634200ac437cc3907ed626/en" title="Add to Cart"></iframe>

I tried adding sandbox="allow-same-origin allow-scripts" based on How can I prevent Iframe messing browser's history after interactions with it? but it didn't help.

I know that I could remove the src and use Javascript to update the src only when the button to show the iframe is clicked, however, this would still cause the back button to not work as expected if the iframe button has been clicked, and the client has specifically called that out as an issue (if they go to the page, click the button to open the iframe, and then try to click back, it doesn't work and this is frustrating them)