Dynamically added link causes doubletap issue in Chrome on iOS - looking for fix / workaround

Question

Issue:
User has to tap link twice to open it.

Expected behaviour:
After replacing the content, first tap on any link should open a page on new tab.

Current behaviour:
After replacing the content, first tap doesn't open the link. Second tap is required.

Minimal code example:
Insert into any HTML page (5s timeout added for convenience):

<div id="dynamic-content">Content before change</div>
<script>
    function timedPassback() {
        let content = "<div style='width: 300px; height: 300px; background: olive; color: white; text-align: center; font-size: 2rem'><a href='//stackoverflow.com/'>Content after change</a></div>"
        let element = document.getElementById("dynamic-content");
        element.innerHTML = content;
    }
    setTimeout(timedPassback, 5000);
</script>

Example page
https://putzj.github.io/ioschromebug/

Steps to reproduce:

1. Open the page containing script in Chrome on iOS
2. Make a scrolling gesture (the page doesn't have to scroll)
3. Wait for the content to be replaced with olive square
4. Click any link on the page

Environment:
iPhone 8 Chrome 107.0.5304.101 iOS 15.2

Debug info:
Can't debug Chrome on iOS. There is no tool that works and allows any remote debugging of this issue (tried it on MacOs, Windows and Ubuntu).

Additional info I doubt it's a feature of Chrome. I already reported it as a bug. I searched the web, didn't find any clues on how to fix it or any workarounds. The issue can be reproduced on 4 different iPhones I have access to.

Answer 1

I'm posting the solution which i picked it from comments to show explicility to everyone. I had a problem same issue and fixed it.

(function () { if (navigator.userAgent.match('CriOS')) { let bumper = document.createElement("div"); bumper.style.cssText = "position: fixed; bottom: 0; left: 0; width: 100%"; document.body.append(bumper); document.addEventListener("touchstart", function () { bumper.remove(); }); } })();