Html Safari上的CSS翻译问题

我正在将我制作的Gif转换成CSS动画。在Chrome、Firefox、Opera上，一切都正常，但在Safari上，一切都正常

当我最初加载页面时，图像会忽略translate并位于下方，但一旦我从Safari选项卡中单击并返回，页面就会更新，并且图像具有translate给定的适当坐标

有人知道为什么会这样吗

HTML:

---

代码笔：

您可以使用供应商前缀进行转换，如下所示。这对我有用

-webkit-transform: translate(-50%,-50%);
-webkit-transform: -webkit-translate(-50%,-50%);

---

您也可以在此处查看供应商浏览器支持。

谢谢您的建议，Yonas。我试过了，但遗憾的是没有解决问题。Safari只是在移动到另一个选项卡然后返回之前，不会使用“翻译”中的坐标渲染页面。@ColeCampbell您是否更改为我所做的所有转换。我把你的建议应用到了所有的webkit关键帧上。图像仍然位于右下角，但一旦我离开选项卡并返回，它就会自行修复。Translate指的是元素本身的尺寸。我怀疑出于某种原因，当safari动画使用IMG加载前的尺寸（0x0）时，它看起来很奇怪。我刚刚遇到了类似的问题。必须通过在动画中不使用translate来解决此问题，这是不幸的。

*{
    margin: 0px;
    padding: 0px;
}

body{
    background-color:#333;
    overflow: hidden;
}

.center{
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;
    display:block;
}

.continent{
    left: 72%;
    animation:slide 9s infinite;
    animation-timing-function: linear;
    z-index: 3;
    transform: translate(-50%,-50%);
}

.globe{
    z-index: 2;
    transform: translate(-50%, -50%);
}

.knockOut{
    z-index: 4;
    transform: translate(-50%,-50%);
}


/*All working above!*/


/*ANIMATION*/

/*Content Slide Animation*/
.slide{
    animation: ;
}

@-webkit-keyframes slide {
    from{left: 71%;}
    to{left: 28.5%;}
}

@-moz-keyframes slide {
    from{left: 71%;}
    to{left: 28.5%;}
}

@keyframes slide {
    from{left: 71%;}
    to{left: 28.5%;}
}

/*Red Arc Animation*/
.redSpin {
    -webkit-animation:spinRed 10s linear infinite;
    -moz-animation:spinRed 10s linear infinite;
    -o-animation:spinRed 10s linear infinite;
    animation:spinRed 10s linear infinite;
}

@-o-keyframes spinRed { 
    0% { -o-transform: translate(-50%,-50%) rotate(0deg); } 
    60% { -o-transform: translate(-50%,-50%) rotate(540deg); } 
    100% { -o-transform: translate(-50%,-50%) rotate(1080deg); } 
}

@-moz-keyframes spinRed { 
    0% { -moz-transform: translate(-50%,-50%) rotate(0deg); } 
    60% { -moz-transform: translate(-50%,-50%) rotate(540deg); } 
    100% { -moz-transform: translate(-50%,-50%) rotate(1080deg); } 
}

@-webkit-keyframes spinRed { 
    0% { -webkit-transform: translate(-50%,-50%) rotate(0deg); } 
    60% { -webkit-transform: translate(-50%,-50%) rotate(540deg); } 
    100% { -webkit-transform: translate(-50%,-50%) rotate(1080deg); } 
}

@keyframes spinRed { 
    0% { transform: translate(-50%,-50%) rotate(0deg); } 
    60% { transform: translate(-50%,-50%) rotate(540deg); } 
    100% { transform: translate(-50%,-50%) rotate(1080deg); } 
}

/*Orange Arc Animation*/
.orangeSpin {
    -webkit-animation:spinOrange 5s linear infinite;
    -moz-animation:spinOrange 5s linear infinite;
    -o-animation:spinOrange 5s linear infinite;
    animation:spinOrange 5s linear infinite;
}

@-o-keyframes spinOrange { 
    0% { -o-transform: translate(-50%,-50%) rotate(0deg); } 
    100% { -o-transform: translate(-50%,-50%) rotate(-720deg); } 
}

@-moz-keyframes spinOrange { 
    0% { -moz-transform: translate(-50%,-50%) rotate(0deg); } 
    100% { -moz-transform: translate(-50%,-50%) rotate(-720deg); } 
}

@-webkit-keyframes spinOrange { 
    0% { -webkit-transform: translate(-50%,-50%) rotate(0deg); } 
    100% { -webkit-transform: translate(-50%,-50%) rotate(-720deg); } 
}

@keyframes spinOrange { 
    0% { transform: translate(-50%,-50%) rotate(0deg); }  
    100% { transform: translate(-50%,-50%) rotate(-720deg); } 
}

/*Yellow Arc Animation*/
.yellowSpin {
    -webkit-animation:yellowSpin 10s linear infinite;
    -moz-animation:yellowSpin 10s linear infinite;
    -o-animation:yellowSpin 10s linear infinite;
    animation:yellowSpin 10s linear infinite;
}

@-o-keyframes yellowSpin { 
    0% { -o-transform: translate(-50%,-50%) rotate(-0deg); } 
    50% {-o-transform: translate(-50%,-50%) rotate(-380deg);}
    100% { -o-transform: translate(-50%,-50%) rotate(-1080deg); } 
}

@-moz-keyframes yellowSpin { 
    0% { -moz-transform: translate(-50%,-50%) rotate(-0deg); } 
    50% {-moz-transform: translate(-50%,-50%) rotate(-380deg);}
    100% { -moz-transform: translate(-50%,-50%) rotate(-1080deg); } 
}

@-webkit-keyframes yellowSpin { 
    0% { -webkit-transform: translate(-50%,-50%) rotate(-0deg); } 
    50% {-webkit-transform: translate(-50%,-50%) rotate(-380deg);}
    100% { -webkit-transform: translate(-50%,-50%) rotate(-1080deg); } 
}

@keyframes yellowSpin { 
    0% { transform: translate(-50%,-50%) rotate(-0deg); } 
    50% {transform: translate(-50%,-50%) rotate(-380deg);}
    100% { transform: translate(-50%,-50%) rotate(-1080deg); } 
}

/*Green Arc Animation*/
.greenSpin {
    -webkit-animation:greenSpin 10s linear infinite;
    -moz-animation:greenSpin 10s linear infinite;
    -o-animation:greenSpin 10s linear infinite;
    animation:greenSpin 10s linear infinite;
}

@-o-keyframes greenSpin { 
    0% { -o-transform: translate(-50%,-50%) rotate(0deg); } 
    100% { -o-transform: translate(-50%,-50%) rotate(1080deg); } 
}

@-moz-keyframes greenSpin { 
    0% { -moz-transform: translate(-50%,-50%) rotate(0deg); } 
    100% { -moz-transform: translate(-50%,-50%) rotate(1080deg); } 
}

@-webkit-keyframes greenSpin { 
    0% { -webkit-transform: translate(-50%,-50%) rotate(0deg); } 
    100% { -webkit-transform: translate(-50%,-50%) rotate(1080deg); } 
}

@keyframes greenSpin { 
    0% { transform: translate(-50%,-50%) rotate(0deg); } 
    100% { transform: translate(-50%,-50%) rotate(1080deg); } 
}

/*Blue Arc Animation*/
.blueSpin {
    -webkit-animation:blueSpin 10s linear infinite;
    -moz-animation:blueSpin 10s linear infinite;
    -o-animation:blueSpin 10s linear infinite;
    animation:blueSpin 10s linear infinite;
}

@-o-keyframes blueSpin { 
    0% { -o-transform: translate(-50%,-50%) rotate(0deg); } 
    50% {-o-transform: translate(-50%,-50%) rotate(-530deg);}
    100% { -o-transform: translate(-50%,-50%) rotate(-1080deg); } 
}

@-moz-keyframes blueSpin { 
    0% { -moz-transform: translate(-50%,-50%) rotate(0deg); } 
    50% {-moz-transform: translate(-50%,-50%) rotate(-530deg);}
    100% { -moz-transform: translate(-50%,-50%) rotate(-1080deg); } 
}

@-webkit-keyframes blueSpin { 
    0% { -webkit-transform: translate(-50%,-50%) rotate(0deg); } 
    50% {-webkit-transform: translate(-50%,-50%) rotate(-530deg);}
    100% { -webkit-transform: translate(-50%,-50%) rotate(-1080deg); } 
}

@keyframes blueSpin { 
    0% { transform: translate(-50%,-50%) rotate(0deg); } 
    50% {transform: translate(-50%,-50%) rotate(-530deg);}
    100% { transform: translate(-50%,-50%) rotate(-1080deg); } 
}

/*Indigo Arc Animation*/
.indigoSpin {
    -webkit-animation:indigoSpin 10s linear infinite;
    -moz-animation:indigoSpin 10s linear infinite;
    -o-animation:indigoSpin 10s linear infinite;
    animation:indigoSpin 10s linear infinite;
}

@-o-keyframes indigoSpin { 
    0% { -o-transform: translate(-50%,-50%) rotate(0deg); } 
    100% { -o-transform: translate(-50%,-50%) rotate(1080deg); } 
}

@-moz-keyframes indigoSpin { 
    0% { -moz-transform: translate(-50%,-50%) rotate(0deg); } 
    100% { -moz-transform: translate(-50%,-50%) rotate(1080deg); } 
}

@-webkit-keyframes indigoSpin { 
    0% { -webkit-transform: translate(-50%,-50%) rotate(0deg); } 
    100% { -webkit-transform: translate(-50%,-50%) rotate(1080deg); } 
}

@keyframes indigoSpin { 
    0% { transform: translate(-50%,-50%) rotate(0deg); } 
    100% { transform: translate(-50%,-50%) rotate(1080deg); } 
}

/*Violet Arc Animation*/
.violetSpin {
    -webkit-animation:violetSpin 10s linear infinite;
    -moz-animation:violetSpin 10s linear infinite;
    -o-animation:violetSpin 10s linear infinite;
    animation:violetSpin 10s linear infinite;
}

@-o-keyframes violetSpin { 
    0% { -o-transform: translate(-50%,-50%) rotate(0deg); } 
    100% { -o-transform: translate(-50%,-50%) rotate(360deg); } 
}

@-moz-keyframes violetSpin { 
    0% { -moz-transform: translate(-50%,-50%) rotate(0deg); } 
    100% { -moz-transform: translate(-50%,-50%) rotate(360deg); } 
}

@-webkit-keyframes violetSpin { 
    0% { -webkit-transform: translate(-50%,-50%) rotate(0deg); } 
    100% { -webkit-transform: translate(-50%,-50%) rotate(360deg); } 
}

@keyframes violetSpin { 
    0% { transform: translate(-50%,-50%) rotate(0deg); } 
    100% { transform: translate(-50%,-50%) rotate(360deg); } 
}

-webkit-transform: translate(-50%,-50%);
-webkit-transform: -webkit-translate(-50%,-50%);