Angular Material Drag and Drop - 使用样式转换时拖动错误的项目

问：

我正在使用 Angular 材质拖放，如以下示例所示：

<div
    cdkDropList
    class="token-list"
    [style.width.px]="50"
    (cdkDropListDropped)="drop($event)">
    <app-token
        cdkDrag
        class="token-block"
        [style.display]="'flex'"
        [style.cursor]="'pointer'"
        [token]="token"
        *ngFor="let token of [1, 2, 3, 4, 5, 6]">
    </app-token>
</div>

其中 app-token 是这个组件：

<div
    class="border d-flex justify-content-center"
    [style.height.px]="50"
    [style.width.px]="50"
    [style.border-radius.px]="6"
    [style.margin.px]="1"
    *ngIf="token">
    <div
        class="d-flex align-self-center"
        [innerHTML]="token">
        <!--
            [style.transform]="'scale(3)'"
        -->
    </div>
</div>

它工作得很好，我可以精确地拖动和排序列表中的元素。 除非我将 commented 属性放在 div 中（只需将其向上移动两行）。当我尝试在底部边框选择一个元素时，它会抓住下面的下一个元素。

选取并拖动底部的项目

我将其归结为样式转换的问题，但不知道如何解决它。