iPad上でのjQueryモバイルトランジションの緩和

Question

私は 'realslide'と呼ばれるCSSトランジションを本当にシンプルにしています。それはすべてスライドします（jQuery Mobileの「スライド」、スライド、フェード）。私はいくつかの容易さを得ようとしています.OutCubic風のイージングでは、最初はアニメーションが速く、トランジションが終了するとゆっくりと動きます。

マシュー・レインは、カスタムCSS緩和のための優れたウェブサイトを作っています：私はjQueryのモバイルにこれを追加するときhttp://matthewlein.com/ceaser/

はしかし、遷移は、ほぼ非existantと非常にラグがあります。これは3Dトランジションをうまくやっているようだから混乱します。

何が起こっているのか知っていますか？ iPad 2/iOS 5.1、jQuery Mobile 1.1.0-RC1、PhoneGap 1.4を使用しています。

マイJSFiddle：http://jsfiddle.net/4TLLc/

マイ移行：

.realslide.in 
{ 
    -webkit-transform: translateX(0); 
    -webkit-animation-name: slideinfromright; 
} 

.realslide.out 
{ 
    -webkit-transform: translateX(-100%); 
    -webkit-animation-name: slideouttoleft; 
} 

.realslide.in.reverse 
{ 
    -webkit-transform: translateX(0); 
    -webkit-animation-name: slideinfromleft; 
} 

.realslide.out.reverse 
{ 
    -webkit-transform: translateX(100%); 
    -webkit-animation-name: slideouttoright; 
} 

@-webkit-keyframes slideinfromright 
{ 
    from { -webkit-transform: translateX(100%);} 
    to { -webkit-transform: translateX(0);} 
} 

@-webkit-keyframes slideouttoleft 
{ 
    from { -webkit-transform: translateX(0);} 
    to { -webkit-transform: translateX(-100%);} 
} 

@-webkit-keyframes slideinfromleft 
{ 
    from { -webkit-transform: translateX(-100%);} 
    to { -webkit-transform: translateX(0);} 
} 

@-webkit-keyframes slideouttoright 
{ 
    from { -webkit-transform: translateX(0);} 
    to { -webkit-transform: translateX(100%);} 
} 

のPhoneGapのWebKitのウィンドウを殺すアニメーション：

.ui-page 
{ 
    -webkit-transition: all 750ms cubic-bezier(1.000, 1, 0.265, 1); /* older webkit */ 
    -webkit-transition: all 750ms cubic-bezier(1.000, 1.650, 0.265, 1.550); 
     -moz-transition: all 750ms cubic-bezier(1.000, 1.650, 0.265, 1.550); 
     -ms-transition: all 750ms cubic-bezier(1.000, 1.650, 0.265, 1.550); 
     -o-transition: all 750ms cubic-bezier(1.000, 1.650, 0.265, 1.550); 
      transition: all 750ms cubic-bezier(1.000, 1.650, 0.265, 1.550); /* custom */ 
} 

Answer 1

がtranslate3d(x, y, z)でtranslateX(x)を交換してみてください。

translate3dトリガーgpuアクセラレーションtranslateXではありません。