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>

​

我们找不到问题的来源，任何帮助都是非常感谢的。考虑到我们只想在动画中使用transform。

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>

​

。