Question

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

我的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

我知道还有很多其他方法可以做到，但我只会理解这里可能出现的问题。有人知道如何解决这个问题吗？

感谢您的帮助！

Answer 1

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

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

在尝试了所有可能的变体后，我发现了一个有效的变种：

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

因此，翻译的绝对值（而不是百分比）解决了这个问题。希望这对你也有帮助！

CSS轮换和翻译问题

1 个答案: