Mobile Safariで2Dトランスフォームのハードウェアアクセラレーションを使用していますか？

Question

私はしばしば、CSSの3Dトランスフォームがモバイルサファリでハードウェアアクセラレーションされていると言われています。これは、2Dトランスフォームがそうでないことを意味するのでしょうか？私は基本的にすべて3D変換として実装できるので、そうでない理由はないと思いますが、確かに知りたいのですが。

2次元変換がハードウェアアクセラレーションではないことが判明した場合、その理由についての洞察は非常に高く評価されます。

Answer 1

CSS 2Dトランスフォームは、モバイルSafariではハードウェアアクセラレーションされていませんが、3Dトランスフォームは、正しくあります。私はそれがなぜそのようなのかはわかりませんが、たぶん彼らはほとんどの2D変換では過度のものであると判断しました。不必要にGPUを使用すると、バッテリ寿命に悪影響を与える可能性があります。

2D変換を3D変換に変換するのは非常に簡単なので、あまり問題にはなりません。 1つのトリックは、ここに記載されているように（0）translateZを使用することです：Appleはそのドキュメントのそれについては何も言っていないので、信頼できるソースを入手することは困難であるhttp://creativejs.com/2011/12/day-2-gpu-accelerate-your-dom-elements/

EDIT

。ここでは、アップルからのディーン・ジャクソン（http://mir.aculo.us/2010/08/05/html5-buzzwords-in-action/から）それについて言っていたものである。本質的には

、任意の変換を実際には、2Dであっても、それはその機能の一つとして、3Dの操作は、ハードウェア合成をトリガします持っている変換、または何もしない（translate3d（0,0,0）など）。これは現在の動作であり、今後変更される可能性があることに注意してください（これがドキュメント化や奨励していない理由です）。しかし、状況によっては非常に役に立ち、再描画のパフォーマンスを大幅に向上させることができます。

SenchaのAriya Hidayatが、モバイルブラウザでハードウェアアクセラレーションを説明する投稿を投稿しました：http://www.sencha.com/blog/understanding-hardware-acceleration-on-mobile-browsers/。ここでは、ポストからの抜粋です：

（NO 3-D関与がなくても）translate3dまたはscale3dするCSSの変換行列を設定するベストプラクティスは、行列のこれらのタイプは、アニメーションを切り替えるという事実から来ています要素に独自のレイヤーを持たせ、残りのレイヤーや他のレイヤーと合成します。しかし、レイヤの作成と合成には価格、つまりメモリ割り当てが必要であることに注意してください。ハードウェアアクセラレーションのために、Webページのすべての小さな要素を盲目的に合成するのは賢明ではありません。メモリを食べるでしょう。

ここでは、ハードウェアアクセラレーションについて説明しているhtml5rocks.comの記事：http://www.html5rocks.com/en/tutorials/speed/html5/です。

現在のところ、ほとんどのブラウザでは、HTML要素が恩恵を受けることを強く示している場合にのみGPUアクセラレーションを使用しています。最も強い示唆は、3D変換がそれに適用されたことです。 3D変換を適用したくないかもしれませんが、GPUアクセラレーションのメリットがありますが、問題はありません。恒等変換を適用するだけです：

-webkit-transform：translateZ（0）;

FirefoxとInternet Explorerは既に2Dトランスフォームにハードウェアアクセラレーションを使用しているため、近いうちにWebKitブラウザ（Chrome、Safari）に組み込むと驚くことはありません。