Drag and Drop positions draggable element incorrectly when style.margin-left is set

[shershey]

Reproduction

The following stackblitz demonstrated the problem:

https://stackblitz.com/edit/angular-drag-and-drop-bug

Steps to reproduce:

1. Copied https://material.angular.io/cdk/drag-drop/overview#reordering-lists to stackblitz
2. Added marginLeft style to the draggable elements.

When using draggable elements outside of cdkDropList, the problem does not occur.

Expected Behavior

I was expecting that the dragged element would not jump suddenly to the right when I start dragging.

Actual Behavior

The dragged element jumps to the right.

In looking at this line, it appears that the style is copied from the draggable element when creating the preview element. That in combination with the transform applies the marign-left twice (sort of). I was hoping that maybe I could work around this by using cdkDragFreeDragPosition instead of setting marginLeft, but it seems cdkDragFreeDragPosition doesn't work when used inside cdkDropList. This bug seems to be similar to #13107 but I believe that bug is closed and the fix does not seem to help here.

I'd love to know if there are ways I can work around this bug for now.

Environment

• Angular: https://stackblitz.com/edit/angular-drag-and-drop-bug
• CDK/Material: https://stackblitz.com/edit/angular-drag-and-drop-bug
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Chrome and macOS

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}