[BUG] will-use: transform causes offset between cursor and dragged element when using react-beautiful-dnd

This is more to be a helpful FYI for people who use Framer.motion with react-beautiful-dnd (or the supported fork hello-pangea/dnd) and are confused about this conflict.

We just updated to latest version and noticed that all draggable elements that had motion.div parent elements had offsets in x,y from cursor.

I discovered the conflict lies in a default style that get's applied will-change: transform;

The fix basically I'm using is to override that style:

<motion.div
 style={{
    willChange: 'auto' // Override will-change to prevent conflicts
 }} 
>

If there's a better solution would love to know!

motiondivision / motion

[BUG] will-use: transform causes offset between cursor and dragged element when using react-beautiful-dnd #2815