css - モバイルサファリのハードウェアアクセラレーション CSS プロパティのリスト

Question

iOS 6 の MobileSafari の変更ログに出くわしました。

WebKit は、-webkit-transform: preserve-3d オプションを使用して、要素のハードウェアアクセラレーションレイヤーを常に作成しなくなりました。作成者は、ハードウェアアクセラレーションを取得する方法としてこのオプションを使用するのをやめるべきです。

ハードウェアアクセラレーション CSS プロパティのリストはありますか?

score 9 · Accepted Answer

Paul Lewis と Paul Irish は、ハイパフォーマンスアニメーションについて非常に優れた記事を書いています。

「私たちは本題に直行します。最新のブラウザは、位置、スケール、回転、不透明度の 4 つを非常に安価にアニメーション化できます。それ以外のものをアニメーション化する場合は、自己責任であり、実行しない可能性があります。シルクのように滑らかな 60fpsを実現します。」

ブラウザが安価にアニメーション化できる 4 つのこと

位置- 変換: translate( n px, n px);

スケール - 変換: scale( n );

回転- 変換: 回転( n度);

不透明度 - 不透明度: 0..1 ;

TranslateZ() または Translate3D() が必要な場合があります。