Pointer Stuck at the Edge of Iframe Image in Clarity-Devtool

Question

Dear Microsoft Clarity Team,

I hope this message finds you well. I have been testing the Clarity-Devtool and I noticed an issue while using it. When I move my pointer over an iframe image, the pointer gets stuck at the edge of the image and does not move inside the iframe.

I was wondering if there is a way to resolve this issue so that the pointer can move inside the iframe image as well. I understand that Clarity does not support viewing the content of the iframe, but I believe that moving the pointer over the iframe area should be allowed. This would greatly enhance my experience with the Clarity-Devtool and provide me with more accurate insights into user behavior.

I also added it sandbox="allow-same-origin allow-scripts allow-pointer-lock" but it does not work also

enter image description here

function mouse(event: Event, root: Node, evt: MouseEvent): void {
    let frame = iframe(root);
    let d = frame ? frame.contentDocument.documentElement : document.documentElement;
    let x = "pageX" in evt ? Math.round(evt.pageX) : ("clientX" in evt ? Math.round(evt["clientX"] + d.scrollLeft) : null);
    let y = "pageY" in evt ? Math.round(evt.pageY) : ("clientY" in evt ? Math.round(evt["clientY"] + d.scrollTop) : null);
    // In case of iframe, we adjust (x,y) to be relative to top parent's origin
    if (frame) {
        let distance = offset(frame);
        x = x ? x + Math.round(distance.x) : x;
        y = y ? y + Math.round(distance.y) : y;
    }

      console.log('pointer.ts Intersection x:' + x + ' y:' + y);

    // Check for null values before processing this event
    if (x !== null && y !== null) { handler({ time: time(), event, data: { target: target(evt), x, y } }); }
}

I added console.log('pointer.ts Intersection x:' + x + ' y:' + y); to the \src\interaction\pointer.ts to track the pointer location

I see it in the console the coordinates but tbe pointer does not move into the frame image.

Here is the link to my test website https://thankful-pond-0d14a730f.2.azurestaticapps.net/

I'm using the Clarity Devtool Extension

It contains two iframes. The Iframe on the top (green) has a source URL to a local file on the same domain src="/myLocalIframe.html, and it works as expected. enter image description here

The one on bottom (red) has a source URL to a different website https://kind-moss-07698f50f.2.azurestaticapps.net/ , and it does not work enter image description here

Here is the [Decoded Data (Page)] enter link description here

Let me know if this help you debug it from your end.

Pointer Stuck at the Edge of Iframe Image in Clarity-Devtool

0 Answers0