Today, I noticed all Angular Material 10 dialogs in my app now have a scroll bar even though this was not the case a couple of days ago. No dependencies or dialog styles were changed as of recent. The dialogs as seen in the documentation have the same issue, for both Angular Material 10 and 11.
What causes the issue and what can de done to address it?
Unwanted scrollbars:
Expected look:
I could not find anything remotely relevant information except for this Chromium ticket, so I opt to answer my own question for benefit of others.
The issue is caused by negative margin contributing to scrollable content height while it didn't before. Affected browsers are Chrome 88 (Beta at the moment) and 89 (Canary); Edge 87 and Firefox 83 are OK. If this is not fixed by the time 88 goes stable, a lot of apps will experience extra scrollbars and maybe other symptoms.
To work around it, remove the negative margin, if acceptable. For Angular Material dialog, remove negative margin from .mat-dialog-actions and set padding-bottom: 0 for mat-dialog-container.
Update 1: here's another Chrome ticket, for this issue specifically.
Update 2: the Chrome issue has since been fixed.
