CSS Translate Issue on Safari

Question

I am working on converting a Gif I made to a CSS animation. Everything works on Chrome, Firefox, Opera, but when it comes to Safari it acts up.

When I initially load the page the images ignore translate and sit below, but once I click out of the Safari tab and back in, the page is updated and the images have the appropriate coordinates given by Translate.

Does anyone know why this would be happening?

HTML:

<section>
        <img src="http://dev.colecampbell.design/CodePen/GayDay/img/Globe.png" class="globe center" width="50%">
        <img src="http://dev.colecampbell.design/CodePen/GayDay/img/Red.png" class="center redSpin" width="50%">
        <img src="http://dev.colecampbell.design/CodePen/GayDay/img/Orange.png" class="center orangeSpin" width="50%">
        <img src="http://dev.colecampbell.design/CodePen/GayDay/img/Yellow.png" class="center yellowSpin" width="50%">
        <img src="http://dev.colecampbell.design/CodePen/GayDay/img/Green.png" class="center greenSpin" width="50%">
        <img src="http://dev.colecampbell.design/CodePen/GayDay/img/Blue.png" class="center blueSpin" width="50%">
        <img src="http://dev.colecampbell.design/CodePen/GayDay/img/Indigo.png" class="center indigoSpin" width="50%">
        <img src="http://dev.colecampbell.design/CodePen/GayDay/img/Violet.png" class="center violetSpin" width="50%">
        <img src="http://dev.colecampbell.design/CodePen/GayDay/img/Continents.png" class="center continent" width="170%">
        <img src="http://dev.colecampbell.design/CodePen/GayDay/img/GlobeMask.png" class="center knockOut" width="190%">
    </section>

CSS:

*{
    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); } 
}

CodePen: http://codepen.io/Cole-Campbell/pen/MJVxdK

Translate refers to the dimensions of the element itself. I suspect that for some reason, when animating safari is using the dimensions the imgs have before they are loaded (0x0), therefore it looks weird. i just ran into a similar issues. had to resolve it by not using translate in the animation, which is unfortunate. — Beppe, May 18 '20 at 17:39

Yonas Hailu · Answer 1 · 2017-02-03T11:49:19.180

1

You can use vendor prefix for transform like below for all. It's working for me.

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

You can also check here caniuse.com for vendor browser support.

edited Feb 03 '17 at 11:49

answered Feb 03 '17 at 11:43

Yonas Hailu

853
7
20

Thanks for the suggestion, Yonas. I tried it out, but sadly it didn't solve the issue. Safari just is not rendering the page with the coordinates from the translate until I move to another tab and then back. – Cole Campbell Feb 03 '17 at 12:21
@ColeCampbell Did you change to all transforms?? – Yonas Hailu Feb 03 '17 at 12:25
That I did. I applied your suggestion to all @-webkit-keyframes. The images still go to the bottom right, but once I leave the tab and go back it fixes itself. – Cole Campbell Feb 03 '17 at 12:32

CSS Translate Issue on Safari

1 Answers1

Linked