元素在iOS設備上停止css轉換時發生抖動

Question

因爲我們知道停止css轉換的唯一方法是將元素設置爲當前位置（計算轉換爲& translate的樣式），並將「transition-duration」設置爲「 0」。我成功地停止轉移。但在iOS設備上有問題：

當我停止轉換時，元素將停止並動搖一點點。我發現原因是，當我們得到該元素的計算樣式並設置轉換值，該元素將仍在短距離，然後停止上，我們得到了位置。

這種只出現在iOS設備上。它工作正常在Chrome在我的Mac，即使在iPhone6模式的開發工具。

有沒有人發現了同樣的問題，因爲我得到了什麼？

enter image description here

Answer 1

無數次的實驗之後，唯一可靠的解決方案，我發現是...不使用CSS過渡。這是iOS的錯誤（在Safari和Chrome轉載），你可以做任何關於它比其他等待，希望這將是固定在未來。

如果您使用jQuery（最好jQuery3，因爲它具有更好的動畫性能），那麼你可以動畫「變換」屬性是這樣的：

$element[0].foo = 0; 

$element.animate({ foo : 1 }, { 
    step: function(now, fx) { 

    $(this).css('transform', 'translate(' + (startX + ((endX - startX) * now)) + 'px, ' + (startY + ((endY - startY) * now)) + 'px)'); 

    }, 
    duration : speed 
}); 

後來只是用.stop()停止動畫沒有任何問題。