css - Safari 11 - CSS 动画中的空白

Question

调整浏览器大小时，Safari 11 中有空白。

.river {
  width: 100%;
  overflow: hidden; 
  position: relative;
}

.river-frame {
  width: 100%;
  position: relative;
  animation: river-horizontal 10s infinite linear;
}

.river-frame:after {
  content: "";
  height: 100%;
  width: 500%;
  position: absolute;
  left: 0;
  top: 0;
  background-size: 20% 100%;
  background-image: url(https://dummyimage.com/600x400/000/fff);
}

.river-frame-img {
  width: 100%;
}

@keyframes river-horizontal {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(-200%);
    transform: translateX(-200%);
  }
}

<div class="river">
  <div class="river-frame">
    <img class="river-frame-img" src="https://image.ibb.co/iUbhYw/library.jpg">
  </div>
</div>

我们找不到问题的根源，感谢任何帮助。假设我们只想在动画中使用变换。

Answer 1

Safari 浏览器需要强制重绘。有一个技巧可以使用 jQuery 完成。在您的文档中包含 jQuery。运行这个小脚本，事情就会按预期进行。我已经包含了下面的代码片段。希望能帮助到你。 😃

$(window).resize(function() {
  $('.river').hide().show(0);
})

.river {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.river-frame {
  width: 100%;
  position: relative;
  animation: river-horizontal 10s infinite linear;
}

.river-frame:after {
  content: "";
  height: 100%;
  width: 500%;
  position: absolute;
  left: 0;
  top: 0;
  background-size: 20% 100%;
  background-image: url(https://image.ibb.co/iUbhYw/library.jpg);
}

.river-frame-img {
  width: 100%;
}

@keyframes river-horizontal {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(-200%);
    transform: translateX(-200%);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="river">
  <div class="river-frame">
    <img class="river-frame-img" src="https://image.ibb.co/iUbhYw/library.jpg">
  </div>
</div>

.