CSSの変換対絶対的な位置付けの値の変更

Question

Iv'eは、iPadや他のタブレット用のWebアプリケーションを作成しており、適切かつ効率的な配置とアニメーションに関する限り多くのビューポートの問題が発生しました。私は最近、すべての私の自由なフローティング要素に-webkit-transformを使う考えを思いついた。私の質問は、position:relative要素内のlrtb値を変更するよりも、スムーズで信頼性の高いアニメーションの方がCSS仕様で提供される変換を使用する方が良いでしょうか？ ハードウェアアクセラレーションをオンにすると、特に方向の変更中に、要素の動きがランダムに点滅することがわかりました。 （絶対的に配置された要素）したがって、注目すべきブログがこのメソッドを使用していないのを見て、私はいくつかの親切な理由があるかどうかをチェックしたいと思っていました。

Answer 1

位置ではなくトランスフォームでより良いパフォーマンスを達成することが可能です。

私は、この優れた記事から数ビットを引用しますが、実際には全体像を得るためにそれを読んでください：

http://www.html5rocks.com/en/tutorials/speed/html5/

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

-webkit-transform: translateZ(0); 

理由は、これは必ずしも常に価値がないので、あなたはCPUが関係している作業の一部を委任し、GPUに、しかし思いやりであることです特にあなたの環境であるiPadなどのモバイルデバイスでは、次のようになります。

この変換を適用しても、パフォーマンスが向上するとは限りません。単にGPUをアップさせ、より多くのバッテリーを使い切ることができますが、これまでと同じ性能を発揮します。だから、このテクニックに注意し、あなたが本当のパフォーマンスの勝利を経験する場合にのみそれを使用してください。

Answer 2

ルカのポイントに加えて、翻訳とテストの掲載結果をテストする2つの投稿があります。

TLDR：transform: translate(x,y);を使用

大幅CSS遷移を持つ要素に塗装時間を増加させます。

ただし、遷移なしの要素で使用すると、position: absolute;top/leftの方が高速になります。

Why Moving Elements with translate is better than position absolute, top/left（ポール・アイリッシュ）：アニメーションの

ガイドライン：

• 使用CSSキーフレームアニメーションやCSSトランジション、すべての可能であれば。ブラウザーはここで大きな時間を費やして絵画と合成を最適化することができます。

• JSベースのアニメーションが必要な場合は、requestAnimationFrameを使用します。 setTimeout、setIntervalは避けてください。

• 可能であれば、すべてのフレーム（jQuery animate（）スタイル）でインラインスタイルを変更しないようにしてください。CSSの宣言的なアニメーションは、ブラウザで最適化された にすることができます。

• 絶対配置の代わりに2D変換を使用すると、通常、より小さな塗装時間とより滑らかな アニメーションによって、より良いFPSが得られます。

• タイムラインフレームのモードを使用して、「ペイントレクトの表示」と「レンダリングされた合成レイヤーボーダー」は、要素がレンダリングされている場所を確認するのに便利です。

Myth Busting transform:translate vs position top/left（騒ぎブログ）：あなたはトランジションを使用していない場合は変換を用いて、より高速になります左/トップのプロパティを設定

プライマリ結論

• 。ターゲットはWebKitのであれば

• は、最速のフレームレートが変換プロパティでトランジションを使用して、およびSafari /モバイルサファリ（クロームが自動的に これを行います）のためのグラフィックス 加速を強制から来ます。

• 非不透明なアイテムを合成する場合、WebKitでグラフィックスアクセラレーションを強制すると、Safari/Mobile Safariで大幅にパフォーマンスが向上し、Chromeではわずかに向上します（ ）。

• 不透明なアイテムだけを合成する場合、WebKitでグラフィックアクセラレーションを強制すると、パフォーマンスに悪影響が及ぼされます。

注：GPUを確保するためにtransform: translate3d(0,0,0)を使用し、モバイルブラウザに遷移を加速しました。 （http://mobile.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/）