CSS3轉換在iOS慢/不工作

我想開始使用一些CSS3轉換在我做的響應網站上，一切工作完美的桌面Chrome和Android上的Chrome，但它不能在ios設備上正常工作的兩個Chrome和Safari。CSS3轉換在iOS慢/不工作

的CSS代碼段我用我的菜單，例如，低於：

#menu { 
width: 180px; 
height: 100%; 
position: fixed; 
top: 0; 
left: -180px; 
z-index: 9; 
transition: left 1s; 
-webkit-transition: left 1s; 
}

我有一個菜單按鈕，點擊後，調用JavaScript函數，改變了「左」的風格0，它從屏幕左側的外側過渡到位置。

一切工作正常在臺式機和Chrome Android上，但在iOS和Chrome瀏覽器它是非常不連貫或它只是延遲一秒鐘，然後立即彈出。在我所有的轉換中都是這樣做的，但爲了簡單起見，我只顯示一個菜單。

我已經做了google搜索，並通過堆棧尋找，但我真的發現的唯一的事情說了很多，以添加以下內容：

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

的風格給力的硬件加速，但它不工作要麼。我看不出有任何改變。任何幫助，將不勝感激。

2016-10-22 Jetteh22

避免的，而不是嘗試使用'變換：平移X（0）'用於水平調整 – Swordys

@Swordys我會給你一張支票。我之前並沒有真正與'變形'混爲一談，因爲直到最近我還沒有真正嘗試過渡，尤其是不適合移動。我也有同樣的問題，不斷變化的/不工作的元素，不改變定位，但有最大高度和不透明度的過渡。對所有人使用變換最好嗎？ – Jetteh22

是的，如果你在絕對元素上使用很多轉換，它會對性能產生很大的影響。使用轉換是順暢體驗的最佳實踐。您還可以嘗試使用'will-change：transform'來強制硬件加速，但目前Safari瀏覽器不支持它。 – Swordys

避免使用它需要大量資源的絕對定位的轉變，而不是嘗試使用它需要大量資源的絕對定位的轉換使用transform: translateX(0)進行水平調整

2016-10-22 21:24:32 Swordys

這對菜單非常適用。任何關於如何獲得'transition：max-height 1s，opacity 1s'的建議不會波濤洶涌！我似乎無法找到不透明度或最大高度的變換。 – Jetteh22

您是否嘗試過在秒針指示器之後使用任何轉換計時功能（如「緩出」或「緩動」）？ – Swordys

我嘗試過使用'緩入式'，'緩和'和'線性'，這是一回事。我只是做了一個快速測試，這是'max-height'的轉換，它有問題。「不透明度」過渡很平穩，但當我嘗試轉換「最大高度」時，它就是跳躍式的。我正在做的是解決方法轉換到'height：auto;'因爲這是行不通的。 – Jetteh22

回答