At first glance, it seems like a bug specific to Chromium. I have already reported this issue in a bug report. Since progress is slow on that front, I am posting a question here primarily to see if anyone else has encountered similar or related issues and has found a workaround solution.
For the sake of readability, I will not provide HTML5 compliant code examples. Instead, I will offer simplified examples.
Description
In Chrome 78 and Edge beta browsers, when there are nested iframes with different origins overlapping an element, there are inconsistencies with the firing of pointerout/pointerover events between clicks inside the iframe - but only when there is movement of at least 1px between pointerdown and pointerup. This behavior differs from Chrome 77, Edge stable, Firefox, and Safari where these events only occur when the pointer leaves or enters the iframe, as expected.
Removing the overlapping element resolves the issue in Chrome 78, but Edge beta remains unaffected by this scenario.
When the origin of both iframes is made similar (e.g. Both localhost), the behavior is as expected in both browsers.
Reproduction
Start a server (like http-server for simplicity) in a folder containing the following files:
a.html
<iframe src="http://127.0.0.1:[port]/b.html"></iframe>
<div style="height: 3px;
width: 300px;
position: absolute;
top: 159px;
left: 10px;
right: 0px;
background: green;"></div>
b.html
<iframe src="http://localhost:[port]/c.html"></iframe>
c.html
<button id="btn">Click</button>
<script type="text/javascript">
var btn = document.getElementById('btn');
btn.addEventListener('pointerdown', function() { console.log('down'); });
btn.addEventListener('pointerup', function() { console.log('up'); });
btn.addEventListener('pointerover', function() { console.log('over'); });
btn.addEventListener('pointerout', function() { console.log('out'); });
btn.addEventListener('pointerleave', function() { console.log('leave'); });
</script>
Navigate to localhost/a.html, click the button, and check the console for event logs.
https://i.stack.imgur.com/t8GUS.gif
Please note that the iframe origins in a.html and b.html differ. When you navigate to 127.0.0.1 the behavior is correct, but on localhost it is not.
If you move the div in a.html outside the iframes, it functions correctly (Chrome 78 only).
Question
Are there any potential workarounds? Ideally something achievable through JS or CSS since adjusting the iframe origin and domains may not always be feasible or optimal.
As for dealing with overlapping divs, sometimes adjusting the z-index can help, but it's not always the best solution especially considering iframes can also have overlapping elements.