CODEWITHSUNDEEP
csssafaricss-animations
vesna
vesna

Reputation: 335

CSS rotate and translate issues

I am currently facing a probably very basic issue with Safari and CSS3 transformations. I am trying to align a grey circle in the center of the screen and then to animate it.

My CSS code seems to work perfectly with any other browser but the circle doesn't align well in Safari. However if I move out the animation everything goes fine. This is the reason why I guess something is wrong with my code :

#loading_container{
  width:100%;  height:100%;
  background-color: #26262B;
  position: absolute;
}

#loading_container>img{
    position: absolute;
    top: 50%;
    left: 50%;
    width:20%;  height:auto;
    min-width: 200px;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    -webkit-animation: rotate 5s infinite;
            animation: rotate 5s infinite;
}

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

@keyframes rotate {
     from {-webkit-transform: translate(-50%,-50%) rotate(0deg);transform: translate(-50%,-50%) rotate(0deg);}
     to   {-webkit-transform: translate(-50%,-50%) rotate(-360deg);transform: translate(-50%,-50%) rotate(-360deg);}
}
<div id="loading_container">
  <img src="http://s32.postimg.org/721vouc3p/loading_icon.png" alt="Loading..."/>
</div>

The weirdest thing is that if I move to another desktop on my mac (I mean if I scroll to the left or right) and then come back to the main one with Safari opened, the circle aligns perfectly as you can see on these two pictures :

This is the result when the page has been loaded... And this is when I move back to the main desktop without having done anything else

I know there are a plenty of other ways to do it but I would only understand what can go wrong here. Does someone have an idea how to solve this problem ?

Thank you for your help !

Upvotes: 2

Views: 1904

Answers (1)

afkatja
afkatja

Reputation: 319

I stumbled into an issue with Safari on iOS yesterday so I thought I could share my solution with you.

When applying a translate(-50%, -50%) together with rotate, on iOS the translate property was ignored. transform-origin didn't help.

After trying all possible variant, I found the one that did work:

$size: 50px;
transform: translate(-$size/2, -$size/2) rotate(0deg);

So the absolute values (instead of percentages) for translate solved the problem. Hope this might help you, too!

Upvotes: 2

Related Questions