滑动的旋转木马图像使用bootstrap 4 Angular 2在Safari上变成白色

Question

当旋转木马向左滑动时，就像是撕裂或闪烁效果一样，好像图像在距离太远的地方消失，并且出现白色空间而不是它。我试图添加溢出：隐藏或宽度：100％，但这也没有真正起作用。

问题是，它在Chrome上运行良好;效果只发生在Safari上。

这是我的组件scss和html文件：

/* Make the carousel take the full screen height */

.fullscreen {
  height: 100vh;
  .carousel-inner {
    .carousel-item {
      height: 100vh;
    }
  }
}

<div id="landingCarousel" class="carousel slide fullscreen" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#landingCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#landingCarousel" data-slide-to="1"></li>
    <li data-target="#landingCarousel" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <img class="d-block img-fluid" src="../assets/images/s1.jpg">
      <div class="carousel-caption">
        <h1 class="text-uppercase">Slide1</h1>
        <p>Slide 1 text</p>
      </div>
    </div>
    <div class="carousel-item">
      <img class="d-block img-fluid" src="../assets/images/s2.jpg">
      <div class="carousel-caption">
        <h1 class="text-uppercase">Slide 2</h1>
        <p>Slide 2 text</p>
      </div>
    </div>
    <div class="carousel-item">
      <img class="d-block img-fluid" src="../assets/images/s3.jpg">
      <div class="carousel-caption">
        <h1 class="text-uppercase">Slide 3</h1>
        <p>Slide 3 text</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#landingCarousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#landingCarousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>