Motion: [BUG] Motion element keeps gradually increasing in scale when dragged

[rihok]

Probably best to show in a sandbox:
https://codesandbox.io/s/gifted-dream-z5onb

When I click on the element with the configuration in the Sandbox, the element keeps gradually increasing in scale as you tap the element (it's a small change, worth checking the inspector to see the effect better).

[lkloeppel]

Having the same problem, the scaling get's stronger when the rotation is increased.

https://codesandbox.io/s/exciting-heyrovsky-x3bbb

And the bug only happens to elements which are rotated and have a different size than the non-rotated element has.

So for that example if the element is a square: If the rotation is 90deg or 180deg the scale is not increased

[kena0ki]

The reason scale increasing is that framer-motion compares the size of element with rotation (as original size) and without rotation (as targeted size) each time when drag starts.

To know the original position of element, it temporarily (just for a few lines) resets the transform value and measures the original position of the element. This is done each time when drag starts.
However when it resets, it clears transform value including initial transform value. As such, original size of the element is measured without transformation and comparison goes wrong.
To align condition of measurement, I think it needs to respect initial transform value when it resets transform.
https://github.com/framer/motion/blob/d490c82267a889c191b24a6a9fadfc1bb53c7ba1/src/gestures/drag/VisualElementDragControls.ts#L273-L277

[kena0ki]

Rather than respecting initial transform value, it should reset only translate, not transform.
...and scale.

[shelbykay]

I can totally reproduce this bug and I'm facing the same problem on a project where I need to drag cards from a stack, a weird scale effect would happen when starting the drag on click or tap.