爲什麼應用'-webkit-backface-visibility：hidden''解決在ios/ipad 5.1上出現負邊限轉換的問題？

Question

我偶然發現了一個針對我的問題的修復方法 - 我不喜歡應用我不明白的修復程序。

<ul> 
    <li><img src="something.jpg" /></li> 
    <li><img src="somethingElse.jpg" /></li> 
    [+12 more <li>'s] 
</ul> 

的是什麼，我認爲是相關的CSS樣式一PRECIS是：

ul { 
    position: absolute; 
    list-style-type: none; 
    top: 0; 
    left: 0; 
} 
li { 
    position: relative; 
    height: 900px; 
    width: 500px; 
    float: left; 
} 
img { 
    display: block; 
    margin: 0 auto; 
} 

問題：當申請執行過渡到整組圖像轉變的過渡左即：

ul { 
    left: -3000px; 
} 

除了ios5.1之外，它可以很好地工作，但偶爾也可以工作，但更常見的是，它最初執行轉換，然後恢復顯示最後一個圖像「成功」設置（例如第一張圖像或轉換設置正確的圖像）。

添加此的CSS：

ul { 
    -webkit-backface-visibility: hidden; 
} 

使一切都正常工作。這對我來說沒有任何意義，我只是在試圖找出如何在轉換之間停止閃爍時偶然發現。

Answer 1

我想我可能確實已經找出了原因。

正在使用的轉換庫似乎有一個bug，這意味着translate（）被用於轉換，而不是translate3d（），儘管它可用。

改變之後，額外的CSS規則：

-webkit-backface-visibility: hidden; 

不再有任何影響 - 過渡移動DOM節點到正確的位置沒有它。

我從中推斷出css規則強制在對象上使用translate3d（）方法。

然而，停止幀之間的有些不規則的運動，我仍然需要補充：

ul { 
    -webkit-transform: translate3d(0,0,0); 
} 

我才發現這個通過試驗和錯誤：尖刻我的CSS與「修復」建議：

-webkit-perspective: 0; 
-webkit-backface-visibility: hidden; 
-webkit-transform: translate3d(0,0,0); 
visibility:visible; 

並確保使用了'translate3d'，然後我逐漸刪除了css'fixes'，直到它只是'-webkit-transform：translate3d（0,0,0）;'在一個地方是必要的。

因此，爲動畫製作正確的調用以及在一個地方應用css風格的組合讓一起變得更好:)