CDK Drag and Drop: Placeholders don't appear on correct position when scrolling inside a list with fixed height.

[PinkTiu]

Reproduction

The drag and drop element must be placed in a container with a fixed height. If the drag and drop list is bigger than the elements within a scrollbar should appear.
For example:

.container {
  height: 500px;
  overflow: scroll;
}

<div class="container">
  <div cdkDropList (cdkDropListDropped)="drop($event)">
    <div *ngFor="let movie of movies" cdkDrag>
      <div *cdkDragPlaceholder></div>
      {{movie}}
    </div>
  </div>
</div>

Now when you take a element and start scrolling the placeholders don't appear on the correct position. Instead it seems to me that the change in the height produced by scrolling is not considered in the calculation where the next placeholder should appear.

Use StackBlitz to reproduce your issue: https://stackblitz.com/edit/angular-jneyub

Steps to reproduce:

1. Take a element and move it around to see the placeholder appear and disappear. When you don't scroll this works perfectly.
2. No while dragging the element start scrolling. You will notice that the placeholders don't appear on the right place.

See this video: https://streamable.com/o9bs1

Expected Behavior

During scrolling the placeholders should appear on the correct place (the same place when scrolling is not used).

Actual Behavior

The placeholders don't appear at the correct position when using scrolling.

Environment

• Angular: 8.2
• CDK/Material: 8.2.3
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): macOS

[crisbeto]

Currently we only support scrolling either the list itself or the viewport. #18082 will add support for scrolling a different parent container.

[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.}