How to get "Pointermove" delegation to work in Safari iOS on parent/child?

I've run into a problem and haven't been able to find a workaround yet. I'm trying to use an event delegate with pointermove on a parent container and I want to know when the event crosses from a child to the parent container and vice versa.

This works well on desktop browsers, but when I try in Safari iOS it seems like the event target gets "stuck" on whatever first started the pointermove. When the pointermove crosses to the parent/child boundary the target doesn't change. Any ideas?

Example code:

const outer = document.getElementById("outer");
outer.addEventListener("pointermove", (e) => console.log(e.target.id))

body {
    touch-action: none;

}
#outer {
  height: 500px;
  width: 500px;
  background-color: #AAAAFF;
}

#inner {
  height: 200px;
  width: 200px;
  background-color: #AAFFAA;
}

<div id="outer">
    <div id="inner">
    </div>
</div>

Looks like this has been an issue for a long time. Touchmove works the same way as pointermove which is why I wasn't seeing results for this question. Here's another stack overflow post with the workaround which is to use document.elementFromPoint like e.g.:

const outer = document.getElementById("outer");
outer.addEventListener("pointermove", (e) => {
    actualTarget = document.elementFromPoint(e.clientX, e.clientY);
    console.log(actualTarget.id);
})