Webkit：3D CSSプロパティを使用しない2D変換用のCSS強制ハードウェアアクセラレーション

Question

3Dを使用せずにWebkitのCSSを使用して2Dトランスフォームにハードウェアアクセラレーションを強制する方法はありませんか（Are 2D transforms hardware accelerated in Mobile Safari?など）。

私はこの記事http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/で説明したように、むしろそれは親コンテナ（に対して位置決めを終了し、そのビューポートに相対して配置されていない、要素はposition: absoluteと同等のものに設定されてposition: fixed要素、との問題を発見しています）。

ハードウェアアクセラレーションを選択していますが、このバグのアウトラインhttps://github.com/jquery/jquery-mobile/issues/2856と同様に、バックグラウンドがiOSのトランジションで白く点滅する傾向があります。

Answer 1

あなたが値を変換あなたの2Dに加えて、nullに値を変換し、3Dを追加することができます。

本当のCSSでのようなものにすることができ

el { 
    transform: 2DValue(val) 3DValueSetToNull(0); 
    transform: 2DValue(val); 
} 

：

div { 
    /* translateZ(0) will not interfere with the rotate value */ 
    /* Also with -webkit-, -moz-, -o- */ 
    transform: rotate(90deg) translateZ(0); 
    /* Compatibility for older (yep) browsers */ 
    /* Also with -webkit-, -moz-, -ms-, -o- */ 
    transform: rotate(90deg); 
} 

3Dを使用してください2D変換値と干渉しない変換値。

PS：

• translate3d（X、Y、Z）
• translateZ（Z）
• scale3d（SX、SY、SZ）
• scaleZ（SZ：3Dは、値が変換）
• 回転X（角度）
• 回転Y（角度）
• rotate3dは（X、Y、Z、角度）、
それは backface-visibility: hiddenを設定するようになります
• 視点（P）
• のMatrix3D（...）は

Answer 2

トリックを行います。私はfps-counterを使用してクロムについてのみこれを確認しました。

.3d-accelerate { 
    backface-visibility: hidden; 
    -webkit-backface-visibility: hidden; 
} 

FPSカウンタはtransitionと表示されません。 translate: transform3d(0, 0, 0)を追加すると表示されます。私もちょうどbackface-visibilityと表示されます。