Safari对CSS的支持这么差么？

Question

写了一个无缝滚动图片轮播的效果，想着纯css做简单点，所以没用js。代码如下：

<template>
<div class="scroll-view">
  <div class="scroll-section"
       v-for="(images) in [images1]"
       :key="images"
  >
    <div class="scroll-slide">
      <img v-show="response" v-for="image in images" :key="image" :src="image" alt="database-image"/>
    </div>
    <div class="scroll-slide">
      <img v-show="response" v-for="image in images" :key="image + '-copy'" :src="image" alt="database-image"/>
    </div>
  </div>
</div>
</template>

<style scoped>
*{
  margin:0;
  padding: 0;
}
.scroll-view{
  border-radius: 10px;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 10px;
  margin-top: 20px;
  margin-bottom: 20px;
  animation: trans 8s ease-in-out;
}

.scroll-section{
  overflow: hidden;
  white-space: nowrap;
}

.scroll-slide img{
  width: 220px;
  height: 220px;
  margin-left: 10px;
}

.scroll-slide{
  will-change: transform;
  display: inline-block;
  animation: 20s slide infinite linear;
}

@keyframes slide {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-100%, 0, 0);
  }
}

</style>

我设置了animation: 20s slide infinite linear;, 动画结束时两个相同的轮滚模块整体回移来达成无缝的滚动效果。我知道这可能有延迟，但出乎我意料的是只有使用Safari时，动画结束整个元素会闪烁一下，而使用chrome和edge则不会。这是渲染逻辑不同导致的吗？有没有比较简单的方法来消除这个闪烁的问题，求解答。

GIF图片链接

类似在Safari上CSS我遇到卡顿的还有background-attachment: fixed;属性，体验极差

Answer 1

https://caniuse.com/

你可以在这个网站上查一下具体是否兼容