Pinch zoom on the canvas doesn’t work properly. what did i do wrong?

[khldonAlkateeh]

there’s a strange behavior happening when I perform a pinch gesture..... it seems like the red square inside the canvas moves during zooming

From what I can tell, the zoom doesn’t stay centered as expected..instead, the red box appears to shift position while scaling

here is a short video showing the issue.
https://github.com/user-attachments/assets/f4fe06e1-73d6-49fc-b203-41f6ffde42db
and here is another video showing the expected behavior(the item doesn't move..it just changes scale):

Screenrecorder-2025-10-21-23-27-11-428.mp4

in the second video i used position:absolute ``left, and top. but the problem that when i use position absolute the gesturedetector doesn't work

Here is my code..it has two components SearchScreen(the parent) and CanvasItem(the child):
https://gist.github.com/khldonAlkateeh/5f2c255ce1f563ec31e4d4ed16696ec6