即使没有重复，背景图像也会垂直重复

Question

我有以下几套css：

.spinner {
  background-image: url('../assets/spinner.svg');
  position: absolute;
  top: 40%;
  left: 45%;
  height: 200px;
  width: 200px;
  background-repeat: no-repeat;
  background-position: center;
}

.overlay {
  height: 100%;
  width: 100%;
  background: black;
  opacity: 0.3;
  z-index: 9999;
  display: block;
  position: fixed;
}

以及以下html代码：

<router-outlet>
    <div *ngIf="fetchingData" class="overlay">
        <div class="spinner"></div>
      </div>
</router-outlet>

图像不应出现两次，但在少数设备中，图像垂直出现两次。我将.spinner高度增加到100%，图片在页面上垂直显示三次。

设置background-repeat-y: no-repeat;也没有效果。如果我将.spinner的高度降低为100px，我只会得到一张图片，但我怀疑这可能会在少数设备中出现。

图片显示两次的任何想法。