在iOS7和Safari 7中進行怪異的翻轉動畫渲染

Question

我正在構建一個使用簡單CSS動畫的基於Web的出版物。 這是一個帶有標題的圓圈，其標題從“后”開始，一直播放到加載頁面時顯示其“前”。 該動畫在Chrome和Safari 6上可以正常播放，但是在設備上進行測試時，圓圈消失了，重疊的英雄圖像上出現了怪異的閃爍和空白。

我無法提供與他人共享的網絡預覽，也無法提供問題的gif圖像（對不起！），但是請告知我是否需要提供更多信息。

編輯：設法解決了渲染問題，但在圖像上旋轉時閃爍。 有任何想法嗎？

我要創建的頁面的圖像：

http://i.stack.imgur.com/TsxpZ.jpg

HTML結構：

<div class="circle-feat flip-circle">
    <div class="circle-title">
        <h1 class="book-align-center Title-White" data-name="title">COLD IN JULY</h1>
    </div>
</div>

CSS片段：

.circle-feat {
  position: relative;
  width: 84%;
  height: 0;
  padding: 42% 0;
  margin: 1em auto;
  border-radius: 50%;
  background: rgb(0,0,0);
  z-index: 10;
}

.circle-title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  transform-style: preserve-3d;
}

.circle-title:before {
  content: '';
  vertical-align: middle;
  display: inline-block;
  width: 0;
  height: 100%;
}

.circle-title h1 {
  vertical-align: middle;
  display: inline-block;
  padding: 20px;
}

.flip-circle {
  transform-style: preserve-3d;
  -webkit-backface-visibility: visible;
  -webkit-animation-name: flip;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-duration: 2.2s;
  -webkit-animation-delay: 1.5s;
}

@-webkit-keyframes flip {
  0% {
    -webkit-transform: perspective(800) translateZ(0) rotateY(-180deg) scale(1);
    -webkit-animation-timing-function: ease-out;
  }

  100% {
    -webkit-transform: perspective(800) translateZ(0) rotateY(0deg) scale(1);
    -webkit-animation-timing-function: ease-in;
  }
}

提前致謝！

Answer 1

我不是Apple的狂熱用戶（抱歉，如果這無關緊要），但是我認為您的問題可能與前綴有關。 Safari的新版本在轉換中不需要-webkit-前綴，但是某些舊版本則需要...您可以嘗試將所有前綴添加到轉換和轉換中，看看它是否更好用。

Answer 2

好的，我真的應該回答這個問題，因為在大多數情況下，這可以回答我自己的問題。 我設法通過刪除文章所附的背景顏色規則解決了渲染問題，我猜想Safari iOS7不能在那里解決它。

Answer 3

我想知道問題是否僅由您正在使用的iPhone引起（缺少RAM，應用太多或瀏覽器配置不正確）。 您可以嘗試使用朋友的iOS7設備，然后檢查是否是這種情況。

以我的經驗，移動設備在網絡上不能很好地處理CSS3動畫，也許蘋果公司在iOS7中走了一些彎路。 因此，您可以嘗試創建該出版物的移動版本，其中沒有任何復雜的動畫。 這篇關於CSS-Tricks的文章很棒-它展示了如何使用jQuery或純Javascript應用單獨的樣式表來實時檢測設備的大小。 我知道這不是真正的解決方案 ，但是如果從動畫中刪除背景色看起來很糟糕，那么這可能是您唯一的選擇。 讓我知道是否可以解決此問題！