moveable-control-box misplaced when used with svg g elements(Safari)

[IIIvan37]

Environments

• Framework name: React
• Framework version:17.0.2
• Moveable Component version: react-moveable 0.32.3
• Testable Address: Minimal CodeSandbox

Description

When using the Moveable component with a SVGGElement as target, the control box is not at the right position (origin at the top left of the svg). The element g is positioned with a transform="translate(x y)".
The behavior is the one expected with Chrome as well as with Firefox, not on Safari.

Safari

Chrome

[daybrush]

@IIIvan37

I'll fix this bug. Thank you.

[daybrush]

@IIIvan37

• lit-moveable 0.6.4
• moveable 0.29.4
• preact-moveable 0.31.4
• react-compat-moveable 0.17.4
• react-moveable 0.32.4
• svelte-moveable 0.21.4
• vue-moveable 2.0.0-beta.11
• vue3-moveable 0.4.4
• ngx-moveable 0.26.4

moveable's new version is released. Check it again.

[IIIvan37]

@daybrush

A problem probably related to this issue is still present. When a rotate is present in the transform of the "g" element the position of the control box is incorrect with Safari.

Previous example updated
https://codesandbox.io/s/priceless-marco-hkh9i0?file=/src/App.js

[IIIvan37]

@daybrush

Sorry, I didn't set the right example in my last message.
The example with a rotate, not working under Safari

https://codesandbox.io/s/gppxkg

[daybrush]

@IIIvan37
It was my transform calculation mistake.

Try 0.32.8-beta.1 version. Thank you :)