safariでチェックするとちらつきます　画像ループ

前提と・実現したいこ

初心者です。

最終チェック時　safariだけループの画像がつっかる　一瞬白くなります。

ちらつきを直したいです。
よろしくお願いいたします。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

HTML

<div class="scroll-all"> <div class="slider"> <div class="slider-wrap"> <div class="slide"> <img src="images/sp-img/scroll-img-sp.png" alt="スクロール画像" class="slide-imge"> </div>

            <div class="slide">
                <img src="images/sp-img/scroll-img-sp.png" alt="スクロール画像" class="slide-imge">
            </div>
            
            <div class="slide">
                <img src="images/sp-img/scroll-img-sp.png" alt="スクロール画像" class="slide-imge">
            </div>
        </div>
    </div>
</div>
<!--/scroll-->

CSS
/*-------------------

スライダー-sp

-------------------/
.scroll-all{
padding: 100px 0 0;
}

@-webkit-keyframes scroll{
0% {
-webkit-animation: scroll 25s linear Os infinite;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-animation: scroll 25s linear Os infinite;
-webkit-transform: translateX(calc(-1000px * 1));
-ms-transform: translateX(calc(-1000px * 1));
transform: translateX(calc(-1000px * 1));
}
}

.slider{
width: 90%;
background: white;
height: 100%;
margin: auto;
overflow:hidden;
-webkit-transform: translateZ(0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
}

.slider-wrap {
animation: scroll 25s linear infinite;
-webkit-animation: scroll 25s linear Os infinite;

display: flex;
width: calc(1000px * 3);
height: 100%;

}

.slide-image{
width: 90%;
height: 100%;
object-fit:cover;
}

.slide{
width: 90%;
height: 100%;
text-align:center;
}

試したこと

-webkit-animation : anim 0.3s linear 0s 1 normal;
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
加えたり
position:relative;を削除しましたが
直りません