106

多くのブログでは、transform: translateZ(0)アニメーションとトランジションを高速化するために使用することで、要素が 3D であると GPU を「だます」ことでパフォーマンスが向上することを表明しています。この変換を次の方法で使用することに影響があるかどうか疑問に思っていました。

* {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}
4

5 に答える 5

106

CSS 変換は、仕様で説明されているように、新しいスタック コンテキストと包含ブロックを作成します。z-index簡単に言えば、これは、変換が適用された固定位置要素が、絶対位置要素のように機能し、値が台無しになる可能性が高いことを意味します。

このデモを見れば、私の言いたいことがわかるでしょう。2 番目の div には変換が適用されています。つまり、新しいスタック コンテキストが作成され、疑似要素が下ではなく上にスタックされます。

なので、基本的にはしないでください。最適化が必要な場合にのみ、3D 変換を適用します。-webkit-font-smoothing: antialiased;これらの問題を発生させずに 3D アクセラレーションを利用する別の方法ですが、これは Safari でのみ機能します。

于 2012-05-30T10:26:37.330 に答える
30

影響が必要な場合は、一部のシナリオでは、ハードウェア アクセラレーションを有効にすると Google Chrome のパフォーマンスが低下します。奇妙なことに、「トリック」を に変更すると-webkit-transform: rotateZ(360deg);うまくいきました。

理由を理解できなかったと思います。

于 2012-05-30T10:51:42.337 に答える
7

私はそれが新しい財産-webkit-transform: translate3d(0, 0, 0);を台無しにするという事実を証明することができます. position: -webkit-sticky;私が取り組んでいた左の引き出しのナビゲーション パターンでは、変換プロパティで必要なハードウェア アクセラレーションが、上部のナビゲーション バーの固定位置を台無しにしていました。トランスフォームをオフにすると、ポジショニングはうまくいきました。

幸いなことに-webkit-font-smoothing: antialiased、html 要素を使用していたため、既にハードウェア アクセラレーションを使用していたようです。iOS7 と Android でこの動作をテストしていました。

于 2014-05-09T14:32:15.903 に答える