1

レスポンシブ ナビゲーション メニューに CSS 3D 変換と 3D のスケーリングを使用しています。タッチ デバイス、より具体的には iPhone では、同じページの個別の jQuery アニメーションの実行が遅くなり、まるでアニメーション中にストロボが発生するかのようになります。誰でもこの問題に光を当てることができますか?

関連性がある場合は、SASSを使用しています：

    nav {

      left: 0;
      @include transform( translate3d(-100%, 0, 0) );
      @include backface-visibility;

      .nav__block {

        @include transition( -webkit-transform 500ms ease );
        @include transition-delay( ease, 0s );

        @include transform( translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9) );
        @include transform-origin( 50% 0% );

      }

    }

  }

以下は、動作が遅い jQuery のスニペットです。

    this.container.filter(':visible').animate({
       'left': '-=' + self.childWidth + 'px'
    }, 300).clearQueue();

よろしくお願いします！

4

1 に答える 1

2

jQuery の animate 関数は、iPhone などのモバイル デバイスでのスムーズなパフォーマンスに必要なハードウェア アクセラレーションを利用していないため、このシナリオの犯人である可能性が最も高いです。

jQuery animate 関数をオーバーライドし、代わりに css3 トランジションを使用するjQuery Animate Enhancedプラグインを使用できます。ここにデモがあります：

JS フィドルのデモ

$(".container").animate({
       'left': '-=' + 400 + 'px',
    'useTranslate3d': true
    }, 500);

iPadでテストしました。実際、jQuery Animate Enhanced ライブラリへの参照を削除すると、モバイル デバイスでのパフォーマンスの低下が見られます。

于 2013-05-03T17:49:53.823 に答える