7

では、そのサイズがビュー ポートに比例するiOS5ようにスケーリングしたいと思います。divこれdivに要素が含まれてvideoおり、ズーム レベルが高すぎると、レンダリングが非常に遅くなります。

スケーリングは次のように行われます。

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

再現するには、ここをクリックしてください。次に、iOSデバイスでShowボタンを押します。レンダリングがスムーズではないことに注意してください。

完全な jsfiddle デモ

いくつかのコメント:

  1. このバグは iOS デバイス (iPad/iPhone) でのみ再現され、デスクトップでは再現されません
  2. initial-scaleが に設定されている場合1.0、バグは発生しません
  3. 動画要素を削除すればバグは発生しない
  4. バグが再現するiOS6
  5. この css ルールセットを div と video に追加して、ハードウェア アクセラレーションをトリガーしようとしました{ transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); }。しかし、それは役に立ちませんでした
  6. 画像を削除して黄色の背景に置き換えようとしましたが、役に立ちませんでした
4

2 に答える 2

0

次のように、scale() の代わりに scale3d() を使用してみてください。

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

また、ブラウザがタッチをサポートしている場合は、クリック ハンドラーの外にセットアップを移動し、「クリック」の代わりに「タッチエンド」を使用して、コードにいくつかの調整を加えました。

私は iPad シミュレーターにしかアクセスできませんが、上記の変更によりパフォーマンスが向上するようです。iOS Webkit でパフォーマンスの問題を引き起こすと報告されている 1024x768 を超えるため、使用しているテスト画像も確認します。こちらの記事を参照してください (2 /3 ウェイダウン - 再描画の回避に関するセクション): http://joehewitt.com/2011/10/05/fast-animation-with-ios-webkit

于 2012-10-08T13:35:46.820 に答える
0

この特定のケースの詳細に入る前に、iOS でハードウェア アクセラレーションをトリガーする次のルールセットを追加してみてください。

transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
于 2012-09-20T15:06:20.023 に答える