MatSpinner making scroll bars bounce

[paulferaud]

Reproduction

Use StackBlitz to reproduce your issue: https://stackblitz.com/fork/components-issue
https://stackblitz.com/edit/angular-ohvkwv

Steps to reproduce:

1. Create a spinner
2. Place in an element with overflow: auto

Expected Behavior

What behavior were you expecting to see?
See the mat spinner, spinning, inside a div.

Actual Behavior

What behavior did you actually see?
The spinner spins, but the div has scroll bars bouncing around.

Fix (?)

Playing with the CSS, it seems like this can be fixed once and for all (I keep hitting this all the time) if:

• The spinning animation is moved from the host to the actual svg
• The host is given the style overflow: hidden

Environment

• Angular: "8.0.0"
• CDK/Material: "8.1.4"
• Browser(s): Version 76.0.3809.100
• Operating System (e.g. Windows, macOS, Ubuntu): Debian GNU/Linux rodete

[jelbourn]

This happens because the spinner actually rotates:

In its rotated position, it's larger than its container. Any fix here will need to ensure that it doesn't cause any breaking layout changes, potentially by making the actual spinning portion position: absolute.

As a temporary workaround, you can increase the size of the container either via height or padding.