diff --git a/src/replay/index.ts b/src/replay/index.ts index 46de8b0f..19bd6c46 100644 --- a/src/replay/index.ts +++ b/src/replay/index.ts @@ -1422,9 +1422,9 @@ export class Replayer { return this.debugNodeNotFound(d, id); } - const base = getBaseDimension(target); - const _x = x + base.x; - const _y = y + base.y; + const base = getBaseDimension(target, this.iframe); + const _x = x * base.absoluteScale + base.x; + const _y = y * base.absoluteScale + base.y; this.mouse.style.left = `${_x}px`; this.mouse.style.top = `${_y}px`; diff --git a/src/types.ts b/src/types.ts index d5122579..66831ffb 100644 --- a/src/types.ts +++ b/src/types.ts @@ -467,6 +467,10 @@ export type mediaInteractionCallback = (p: mediaInteractionParam) => void; export type DocumentDimension = { x: number; y: number; + // scale value relative to its parent iframe + relativeScale: number; + // scale value relative to the root iframe + absoluteScale: number; }; export type Mirror = { diff --git a/src/utils.ts b/src/utils.ts index 9f3c8551..c04a8d67 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -550,19 +550,32 @@ export function isIframeINode(node: INode): node is HTMLIFrameINode { return node.__sn.type === NodeType.Element && node.__sn.tagName === 'iframe'; } -export function getBaseDimension(node: Node): DocumentDimension { +export function getBaseDimension( + node: Node, + rootIframe: Node, +): DocumentDimension { const frameElement = node.ownerDocument?.defaultView?.frameElement; - if (!frameElement) { + if (!frameElement || frameElement === rootIframe) { return { x: 0, y: 0, + relativeScale: 1, + absoluteScale: 1, }; } const frameDimension = frameElement.getBoundingClientRect(); - const frameBaseDimension = getBaseDimension(frameElement); + const frameBaseDimension = getBaseDimension(frameElement, rootIframe); + // the iframe element may have a scale transform + const relativeScale = frameDimension.height / frameElement.clientHeight; return { - x: frameDimension.x + frameBaseDimension.x, - y: frameDimension.y + frameBaseDimension.y, + x: + frameDimension.x * frameBaseDimension.relativeScale + + frameBaseDimension.x, + y: + frameDimension.y * frameBaseDimension.relativeScale + + frameBaseDimension.y, + relativeScale, + absoluteScale: frameBaseDimension.absoluteScale * relativeScale, }; } diff --git a/typings/types.d.ts b/typings/types.d.ts index f29286cf..442fd5b6 100644 --- a/typings/types.d.ts +++ b/typings/types.d.ts @@ -332,6 +332,8 @@ export declare type mediaInteractionCallback = (p: mediaInteractionParam) => voi export declare type DocumentDimension = { x: number; y: number; + relativeScale: number; + absoluteScale: number; }; export declare type Mirror = { map: idNodeMap; diff --git a/typings/utils.d.ts b/typings/utils.d.ts index ba1050b4..8a4eb167 100644 --- a/typings/utils.d.ts +++ b/typings/utils.d.ts @@ -61,5 +61,5 @@ export declare type AppendedIframe = { builtNode: HTMLIFrameINode; }; export declare function isIframeINode(node: INode): node is HTMLIFrameINode; -export declare function getBaseDimension(node: Node): DocumentDimension; +export declare function getBaseDimension(node: Node, rootIframe: Node): DocumentDimension; export {};