iOS的Safari瀏覽器，視頻和規模

在iOS5渲染速度慢的問題，我想縮放div所以它的大小是成正比的視口。當這個div包含video元素並且縮放級別太高時，渲染是非常慢。iOS的Safari瀏覽器，視頻和規模

縮放像這樣做：

var scaleFactor = window.innerWidth/$("#videoContainer").width(); 
    $("#videoContainer").css({ 
     '-webkit-transform': 'scale(' + scaleFactor * 0.9 + ')', 
     '-webkit-transform-origin': '0 0' 
    });

To reproduce click here.那麼你iOS設備上，按Show按鈕。注意渲染不平滑。

The complete jsfiddle demo

一個幾句話：

這個bug只再現iOS設備（iPad/iPhone的），而不是在桌面上
如果initial-scale設置爲1.0，錯誤沒有按不會發生
如果視頻元素被刪除，則不會發生該錯誤
該錯誤再現iOS6
我曾嘗試加入這個CSS規則集股利和視頻{ transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); }觸發硬件加速。但它並沒有幫助
我曾試圖刪除圖像，並用黃色背景來取代它，但它並沒有幫助

來源

2012-09-19 viebel

潛水前這個具體案件的細節，你可能想嘗試添加下面的規則集，這觸發iOS上的硬件加速：

transform: translate3d(0,0,0); 
-webkit-transform: translate3d(0,0,0);

來源

2012-09-20 15:06:20 Ronny

我加入這個CSS規則集來'div'和'video'，但它並沒有幫助（看：http://jsfiddle.net/viebel/yhRNu/3 /） – viebel

你可以嘗試使用scale3d（），而不是規模（），如下：

http://jsfiddle.net/yhRNu/26/

也取得了一些調整你的代碼，移動設置的點擊處理程序之外，使用「touchend」而不是「點擊」如果瀏覽器支持觸摸。

我只能訪問iPad模擬器，但上述更改似乎可以提高性能，我還會看看您使用的測試圖像，因爲它超過了1024x768，據報道這會導致iOS webkit上的性能問題，請參閱文章在這裏（2/3一路下滑 - 上避免重繪部分）：http://joehewitt.com/2011/10/05/fast-animation-with-ios-webkit

來源

2012-10-08 13:35:46 thomh

我用黃色背景替換了圖片http://jsfiddle.net/yhRNu/29/。但仍然黃色div閃爍，我沒有看到'scale3d'和'scale'之間的區別。 – viebel

iOS的Safari瀏覽器，視頻和規模

回答

相關問題