MatSpinner is unaffected by transform: translate()

[hodossy]

Reproduction

Example: https://components-issue-v63m7m.stackblitz.io

Resize the window to see that the top left corner of the spinner is in the center.

Steps to reproduce:

1. Have an absolutely positioned element with a spinner inside:

position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;

2. Apply the following css:

position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Expected Behavior

Spinner is properly centered

Actual Behavior

Translate is not affecting the spinner

Environment

• Angular: 8.2.4
• CDK/Material: 8.1.4
• Browser(s): Chrome 76
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10

[donroyco]

MatProgressSpinner itself is indeed unaffected by transform property. To circumvent this, just add a div around the <mat-spinner> and give it that div the absolution positioning:

position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

[crisbeto]

@donroyco is correct. Also after #16930 gets in the animation won't be on the host anymore.

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