CSS旋转和翻译问题

我目前面临着Safari和CSS3转换可能非常基本的问题。我正试图在屏幕中心对齐一个灰色圆圈，然后为其设置动画。CSS旋转和翻译问题

我的CSS代码似乎可以与任何其他浏览器完美配合，但圆形在Safari中并不能很好地对齐。但是，如果我搬出动画一切顺利。这就是为什么我想什么是错我的代码：

#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>

最奇怪的是，如果我移动到另一个桌面上的我的MAC（我的意思是，如果我向左滚动或右），然后再回到一个主要使用Safari打开，圆对齐完美，你可以在这两张照片看到：

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

我知道还有很多其他方法可以做到，但我只会明白这里可能出现什么问题。有人有一个想法如何解决这个问题？

谢谢你的帮助！

来源

2016-06-13 vesna

你有没有试过设置'transform-origin：center center'？ ...此外，发布一个工作代码片段，所以我们有一些工作与 – LGSon

更新与图像以及现在很难看到它如何动画 – LGSon

我刚刚做到了 – vesna

昨天我在iOS上偶然发现了Safari的一个问题，所以我想我可以与你分享我的解决方案。

当将translate(-50%, -50%)与rotate一起应用时，iOS上的translate属性被忽略。 transform-origin没有帮助。

尝试所有可能的变化后，我发现了一个没有工作：

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

所以绝对值（而非百分比）为翻译解决了这个问题。希望这也能帮助你！

来源

2016-08-09 07:41:25 afkatja

您其实是对的，它就像一个魅力！谢谢！ – vesna

CSS旋转和翻译问题

回答

相关问题