Question

我在角度4应用程序上有以下旋转木马：

＆＃13;

@mixin carousel-bg() {
  width: 100vw;
  height: 100vh;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.slide1 {
  background: url('assets/slide1.jpg') no-repeat center center fixed;
  @include carousel-bg;
}

.slide2 {
  background: url('assets/slide2.jpg') no-repeat center center fixed;
  @include carousel-bg;
}

.slide3 {
  background: url('assets/slide3.jpg') no-repeat center center fixed;
  @include carousel-bg;
}

＆＃13;

<div id="carousel" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <div class="d-block img-fluid slide1"></div>
    </div>
    <div class="carousel-item">
      <div class="d-block img-fluid slide2"></div>
    </div>
    <div class="carousel-item">
      <div class="d-block img-fluid slide3"></div>
    </div>
  </div>
</div>

＆＃13;

这在Chrome上完全正常。然而，在Safari上，一旦图像几乎完全滑动，就在它到达边缘之前，另一个图像消失，每次滑动时都会产生突然切割的效果。

值得注意的是，这些图像的大小均超过4MB;但毕竟我在本地机器上工作......

Angular 2+上的Bootstrap 4 Carousel滑动时切割（Safari）

0 个答案: