Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
moveable-control-box misplaced when used with svg g elements(Safari)
See original GitHub issueEnvironments
- 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
Issue Analytics
- State:
- Created a year ago
- Comments:5 (3 by maintainers)
Top Results From Across the Web
moveable-control-box misplaced when used with SVG elements
I'm working with SVG elements (the dimension of the ViewBox is the same of the svg element). The position of the surrounded rectangle...
Read more >Here's How I Solved a Weird Bug Using Tried and True ...
At first, this looks like a CSS issue. Some styles might be applied on a hover event that breaks the layout or the...
Read more >How to place and center text in an SVG rectangle
An easy solution to center text horizontally and vertically in SVG: Set the position of the text to the absolute center of the...
Read more >Draggable SVG elements - Peter Collingridge
A step-by-step guide to making SVG elements draggable. ... Dragging the mouse, when we need to move the element.
Read more >Safari Technology Preview Release Notes - Apple Developer
Added support for editing @-rules in the Styles sidebar of the Elements tab ... Fixed SVG textPath rendering when a text element is...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@IIIvan37 It was my transform calculation mistake.
Try 0.32.8-beta.1 version. Thank you 😃
@IIIvan37
lit-moveable0.6.4moveable0.29.4preact-moveable0.31.4react-compat-moveable0.17.4react-moveable0.32.4svelte-moveable0.21.4vue-moveable2.0.0-beta.11vue3-moveable0.4.4ngx-moveable0.26.4moveable’s new version is released. Check it again.