Safari 11 - CSS动画中的空白区域

Question

调整浏览器大小时，Safari 11中会出现空格。

＆＃13;

＆＃13;

.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%);
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我们无法找到问题的根源，我们非常感谢您的帮助。考虑一下我们只想在动画中使用变换。

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

.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%);
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;