Angular игнорирование CSS свойство преобразования

Question

Я создал компонент наложения для отображения счетчика загрузки, используя Angular Материал;

overlay.component.html:

<div id="overlay">
  <mat-progress-spinner id="spinner" color="accent" mode="indeterminate" diameter="100"></mat-progress-spinner>
</div>

overlay.component.css:

#overlay {
  position: fixed;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 100;
  cursor: default;
}

#spinner {
  position: absolute;
  display: inline-block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

Свойства transform (transform, -o-transform, -moz-transform, -webkit-transform) игнорируются, но если я использую свойства margin (s) (поскольку diameter из mat-progress-spinner известен ), mat-progress-spinner будет отображаться точно в центре экрана:

#spinner {
  position: absolute;
  display: inline-block;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
}

Почему Angular игнорирует свойство преобразования?

Angular вер: 10.0.5

Angular Материал 10.1.2