moveable-control-box misplaced when used with SVG foreignObject elements on Safari

[DatLe1108]

Environments

• Framework name: reactjs
• Framework version: 17.0.2
• Moveable Component version: react-moveable 0.45.1
• Testable Address(optional): Code Sandbox

Description

Hi, I need to render html elements inside a svg therefore i used foreignObject element. The moveable-control-box is renderer correctly on Chrome but misplaced on Safari.

This is what i tried to do

 <>
      <Moveable target={target} draggable={true} resizable={true} />
      <svg viewBox="0 0 86 54">
        <foreignObject ref={ref} x="10" y="10" width="20" height="20">
          <div>Hi</div>
        </foreignObject>
      </svg>
</>

Below is a screenshot to compare:
Safari

Chrome

[lizaemran]

I am facing similar issue in Firefox as well

[daybrush]

@lizaemran @DatLe1108

• croact-moveable 0.9.0
• @moveable/helper 0.1.3
• lit-moveable 0.30.0
• moveable 0.53.0
• preact-moveable 0.55.0
• react-moveable 0.56.0
• svelte-moveable 0.45.0
• vue-moveable 2.0.0-beta.87
• vue3-moveable 0.28.0
• ngx-moveable 0.50.0

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