From fd4bf1797ead519fbf8ce8d78deb0a78efffd703 Mon Sep 17 00:00:00 2001
From: zubiden <19638254+zubiden@users.noreply.github.com>
Date: Fri, 29 Aug 2025 08:57:54 +0200
Subject: [PATCH] Custom Emoji: Fix position when animating scale (#6146)

---
 src/hooks/useCoordsInSharedCanvas.ts | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/hooks/useCoordsInSharedCanvas.ts b/src/hooks/useCoordsInSharedCanvas.ts
index 51e177747..222a39580 100644
--- a/src/hooks/useCoordsInSharedCanvas.ts
+++ b/src/hooks/useCoordsInSharedCanvas.ts
@@ -5,6 +5,7 @@ import {
 } from '../lib/teact/teact';
 
 import { round } from '../util/math';
+import getOffsetToContainer from '../util/visibility/getOffsetToContainer';
 import useLastCallback from './useLastCallback';
 import useResizeObserver from './useResizeObserver';
 import useSharedIntersectionObserver from './useSharedIntersectionObserver';
@@ -38,12 +39,15 @@ export default function useCoordsInSharedCanvas(
       return;
     }
 
-    const targetBounds = target.getBoundingClientRect();
-    const canvasBounds = canvas.getBoundingClientRect();
+    const { left: targetLeftOffset, top: targetTopOffset } = getOffsetToContainer(target, canvas.parentElement!);
+    const { left: canvasLeftOffset, top: canvasTopOffset } = getOffsetToContainer(canvas, canvas.parentElement!);
+
+    const left = targetLeftOffset - canvasLeftOffset;
+    const top = targetTopOffset - canvasTopOffset;
 
     // Factor coords are used to support rendering while being rescaled (e.g. message appearance animation)
-    setX(round((targetBounds.left - canvasBounds.left) / canvasBounds.width, 4) || 0);
-    setY(round((targetBounds.top - canvasBounds.top) / canvasBounds.height, 4) || 0);
+    setX(round(left / canvas.clientWidth, 4) || 0);
+    setY(round(top / canvas.clientHeight, 4) || 0);
   });
 
   useEffect(recalculate, [recalculate]);