angular - Angular忽略CSS变换属性

Question

我创建了一个覆盖组件，用于使用 Angular Material 显示加载微调器；

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( s) 属性（因为of是已知的），则会在屏幕中心准确呈现：-webkit-transformmargindiametermat-progress-spinnermat-progress-spinner

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

为什么 Angular 忽略了 transform 属性？

角度版本：10.0.5

角材料 10.1.2

标签： angularangular-material