Components: Mouse scrolling freezes in weird edge cases

[paya-cz]

Reproduction

https://stackblitz.com/edit/angular-xy3jhe

Steps to reproduce:

1. Run the StackBlitz
2. Make sure the window is short enough to show vertical scrollbar
3. Start scrolling vertically by your mouse wheel, AND at the same time keep moving your mouse around the table (this is crucial - cannot reproduce with stationary mouse position)

Do note that if you do ANY of the following changes, the bug is no longer reproducible:

• modify table-selection-example.ts such that no checkbox is in selected state, eg. by changing the line
  ts selection = new SelectionModel<PeriodicElement>(true, ELEMENT_DATA.slice(0, 3));
  to
  ts selection = new SelectionModel<PeriodicElement>(true, ELEMENT_DATA.slice(0, 0));
• Remove from table-selection-example.html:
  html <mat-label>Search</mat-label>
  AND set sticky: true to sticky: false in:
  html <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>

Expected Behavior

The mouse wheel keeps scrolling the window without any interruption.

Actual Behavior

The mouse wheel can no longer scroll the window. You can scroll with keyboard arrows or by dragging the scrollbar by clicking on it. Hovering over matTooltip to display a Angular Material tooltip seems to fix the scrollbar and you can use the mouse wheel again, until it gets stuck again.

Environment

• Angular: 8.2.14
• CDK/Material: 8.2.3
• Browser(s): Google Chrome 78.0.3904.97
• Operating System (e.g. Windows, macOS, Ubuntu): WIndows 10 v1903

Cannot reproduce the bug in Safari or Firefox on MacOS 10.15.1

[reimavronicolas]

Also able to reproduce this locally. Any news on this?

[nicklastromb]

Experiencing the same issue and it seems to be related to the Chrome version run.
Tested the following versions of Chrome with mixed results, may therefore be related to a Chrome issue and not a Angular/Material issue.

Chrome 77 (Tested OK with version 77.0.3865.75, via Browserstack Windows 10)
Chrome 78 (Tested NOT OK with version 78.0.3904.70, Windows 10 v1909)
Chrome 78 (Tested NOT OK with version 78.0.3904.70, via Browserstack Windows 10)
Chrome 79 (Tested OK with beta version 79.0.3945.45, Windows 10 v1909)
Chrome 79 (Tested OK with beta version 79.0.3945.16, via Browserstack Windows 10)
Chrome 80 (Tested OK with dev version 80.0.3955.4, via Browserstack Windows 10)

Environment

• Angular 8.2.2
• CDK/Material 8.1.3
• Browser(s): Listed above in the test result
• Operating system: See test results above

We've also tried moving back to Angular 7.2.11 and CDK/Material 7.3.6 with the same issue appearing.

[dmitry-urenev]

Probably related issue https://github.com/angular/components/issues/17807

[prom00]

Probably related issue #17807

Using Firefox indeed has no issues with scrolling in my issue #17807

[zdenekhatak]

It seems to me, that this is not an issue in Chrome 79 anymore.

[paya-cz]

Yes, I can no longer reproduce the issue in the newest version of Chrome.

[prom00]

Correct! I've commented it in my issue:

https://github.com/angular/components/issues/17807#issuecomment-564428929

[angular-automatic-lock-bot[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._}