在移動Safari中旋轉時拖動SVG渲染

得到了一個非常棘手的問題，我一直在試圖弄清楚一段時間。基本上我正在建造一個大轉輪，它有多個以不同速度轉動的元件。它大約是5000像素，但視口是窗口高度的百分比。由於縮放，輪子本身就是SVG，因此它在所有設備上看起來都很清晰。 SVG在地方有一些非常複雜的路徑。在移動Safari中旋轉時拖動SVG渲染

這很難解釋，所以我做了一個我正在談論的準系統演示：http://jsfiddle.net/UsVeZ/3/embedded/result/（編輯它在這裏：http://jsfiddle.net/UsVeZ/13/）。點擊/點擊文檔以查看它旋轉。

一切看起來不錯，它在桌面（Chrome + Safari）上效果很好，但是當我在iPad上旋轉輪子時，移動Safari會延遲渲染。旋轉動畫本身非常流暢，但只是渲染無法跟上。用我複雜的SVG（不幸的是我不允許分享，但演示給出了一個想法）更糟糕。查看iPad上的內容，瞭解我的意思。

我不太清楚如何解決這個問題 - 理想情況下，如果有一些方法可以將整個SVG保存在內存中（不確定渲染是如何工作的，或者爲什麼它在做它正在做的事）。如果任何人有任何想法，或者甚至有不同的方法，那將是驚人的。

來源

2012-07-10 Christian Varga

所以我不能最終解決這個問題，我的真實例子正確。我最終恢復爲圖像（我將我的大圖片分成9個較小的圖像，並將它們平鋪以獲得iOS'5mp的限制），並在每幅圖像上應用以下屬性，這似乎緩存圖像：

-webkit-transform-style: preserve-3d;

它不能很好地擴展，但它更流暢，更重要。

來源

2012-07-18 08:08:21

這不是一個完整的答案，只是你可以遵循的幾個策略。

如果你申請...

body { 
    -webkit-transform: scale(0.3); 
}

你會看到移動Safari瀏覽器如何存儲你的SVG，它被像素化，然後正確呈現。如果您點擊並等待，再次點擊時會重新緩存圖像。但是如果你不斷點擊，你會注意到你沒有給它一個重新緩存圖像的機會。

這也發生在你的jsfiddle中，如果你連續點擊最終你不會得到任何波濤洶涌的塊。

所以，如果你不讓Safari瀏覽器通過創建無休止的過渡一樣重新緩存的圖片

$("svg").on("webkitTransitionEnd", function(){ 
    rotation -= .01; 
    $("#large").css('-webkit-transform', "translate3d(0, 0, 0) rotate(" + rotation + "deg)"); 
    $("#small").css('-webkit-transform', "translate3d(0, 0, 0) rotate(" + (rotation * 1.5) + "deg)"); 
});

那麼緩存永遠不會過時。

但是，一旦您刪除身體上的比例，Safari似乎不會緩存視口外的任何圖形。所以，也許如果你讓輪子有一個完整的負載旋轉，它會緩存圖像。

來源

2012-07-10 18:40:46 Duopixel

再次感謝您的想法，你一直很有幫助:)。我嘗試了一些想法，但似乎沒有任何工作，所以我回到了圖像。 – 2012-07-18 08:06:23

我實際上已經採取了幾個不同的SVG，並在iOS中對它們應用旋轉，最後在旋轉它時立即添加此框。我無法在Safari或Chrome（桌面）中複製它。嘗試了一堆不同的東西讓它停止，但沒有運氣。我還沒有能夠在網上找到很多關於它是否存在bug的反饋。

只需應用-webkit-transform：rotate（122deg）;

例在 - http://bit.ly/QnAgFK

我發現，某些[對象]標籤必須有#documents添加圍繞Safari中的SVG 6.別人不[HTML] [正文]標籤。所以我的假設是這是一個MIME類型的主機問題，但我已經爲.svg添加了image/svg + xml mime-type。

來源

2012-09-07 21:05:20 Mark

示例鏈接已損壞:( – Sushan 2016-12-20 04:40:22

我對這個有一個骯髒的修復。

#topParentId *{ 
    -webkit-transform-style: preserve-3d !important; 
}

我已經將css應用於topParentId Id的每個孩子，並且這對我來說工作正常。它改變了輸出中的一點點CSS，但它對我來說工作正常。

來源

2016-12-20 04:50:54 Sushan

在移動Safari中旋轉時拖動SVG渲染

回答

相關問題