mouse drag out of sync with div scale

[hzjux001]

When I change the target div's SCALE, just like "transform: scale(0.457292) translate(0px, 0px);",the movement or dragging in the gridstack is out of sync with the real mouse movement

[adumesny]

you need to create a reproduceable test case if you want us to take a look. look at the jsfiddle template

[hzjux001]

Because In many cases we need to zoom the page，
in the example https://gridstackjs.com/demo/advance.html,
I change the style in grid-stack div
just like
<div class="grid-stack grid-stack-instance-9799 grid-stack-animate ui-droppable" data-gs-animate="yes" data-gs-current-row="6" style="height: 460px;transform: scale(0.7, 0.7) translate(0px, 0px);">
and when we drag or resize by mouse,
the movement or dragging in the gridstack is out of sync with the real mouse movement

[hzjux001]

The same is true even if you put the zoom style on the outer DIV
just like
<div style="width:100%;height:100%;transform: scale(0.7, 0.7) translate(0px, 0px);>
<div class="grid-stack grid-stack-instance-9799 grid-stack-animate ui-droppable" data-gs-animate="yes" data-gs-current-row="6" >...</div>
</div>

[hzjux001]

Who can help me solve this problem,Please.

[adumesny]

browser zooming works just fine, so not sure why you would manually scale the div in code...

if you are such in need of a fix, and don't want to fix it yourself, maybe you should consider donating $ to this effort.

[hzjux001]

How can I donate

[adumesny]

github page and website has donate links https://github.com/gridstack/gridstack.js

[vishaldodiya]

@adumesny Is there any workaround for this? Like we can calculate position according to scale and pass it to gridstack.

[adumesny]

unlikely to get fixed as not a priority or support and I don't understand the use case why you would scale a div (so many things break when scaling in my experience).

HTML5 drag&drop is a lot worse than the JQ version which seems only off by scale factor relative to parent (0,0)