Wrong component fires drop event in Angular Material 7

[iSerganov]

Bug, feature request, or proposal:

Bug report.

What is the expected behavior?

Drop event is not fired on dropping the dragged item to the visible element over the hidden part of droppable list with elements built by ngFor.

What is the current behavior?

I have two components with dropabble lists aligned vertically one below the other. The top list contains a certain amount of elements with total height more than the height of the container. Overflow is set to auto so I have a vertical scrollbar as a result.
Once I drag and drop item from a third list to the BELOW component, the drop event is fired be the ABOVE one. During the debug I found out that the source element of the fired event is the item list which is not displayed, but located in the exact place of drop. So I expect that drop event is fired by the visible (BOTTOM) component, but not the one which is located on the "bottom layer".

What are the steps to reproduce?

1. Build 2 components with a droppable lists and align them vertically (one above the other).
2. Populate with ngFor directive the TOP list with some items in order to have list with height twice larger then the actual height of the component(set overflow-y to auto in order to have vertical scroll bar).
3. Build any component with ability to drag and drop items from it to the created above components.
4. Drag and drop item to the bottom component.

You will see that the actual drop event is not fired be the BOTTOM component towards which you have actually dropped the item, however the event is fired by the component above.

Please note that the position of both components is absolute.

What is the use-case or motivation for changing an existing behavior?

From my perspective, this is a critical bug which prevents me from using the latest version of angular material library in production.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

 "@angular/cdk": "7.0.4",
"@angular/common": "7.1.0-rc.0",
"@angular/compiler": "7.1.0-rc.0",
"@angular/core": "7.1.0-rc.0",
"@angular/forms": "7.1.0-rc.0",
"@angular/http": "7.1.0-rc.0",
"@angular/material": "7.0.4",

"@angular/cli": "7.1.0-rc.0",
"@angular/compiler-cli": "7.1.0-rc.0",
"typescript": "3.1.3"

[crisbeto]

Can you provide a Stackblitz that illustrates the issue? You can use some of the examples on the docs as a base.

[iSerganov]

Can you provide a Stackblitz that illustrates the issue? You can use some of the examples on the docs as a base.

https://stackblitz.com/edit/angular-uk3rnj?file=app%2Flist-overview-example.html

Please move the scroll of the top list to the top of it and drag items from the right list to the left bottom component several(4-5) times. You'll see that at least several times drop event of the top component is fired instead of the bottom one towards which you drops the item.