問題タブ [will-change]

CSS のプロパティに関する興味深い記事を見つけましたwill-change(これにより、何が変更され、積極的に反応するかを事前にブラウザーに伝えることができます)。このプロパティの背後にある主な理由は、パフォーマンスを向上させることです。

私が理解している限り、次のように使用できます: jsFiddle (四角をクリック)

ここまでは順調ですが、パフォーマンスの改善について語るには、この改善を測定する方法が必要です。

では、パフォーマンス、CPU/GPU 使用率の有無を測定する方法はありwill-changeますか?

この記事の執筆時点では、Chrome Canary 36 以降、Opera Developer 23 以降、および Firefox Nightly のみが will-change プロパティをサポートしています。安定したチャネルにも出荷する意図があります。

CSS will-change^{W3.org docs、MDN docs}プロパティ (Chrome で既に動作し、Firefox と Opera で部分的にサポートされています) を見つけましたが、それがどのように機能するかはよくわかりません。この謎の物体について、もっと詳しいことを知っている人はいますか？

ブラウザが将来の要素に対する計算の準備をできるようにすることを読んだところです。誤解したくありません。いくつか質問があります。

1. このプロパティを要素クラスまたはそのホバー状態に追加する必要がありますか?

   また

   /li>

2. ブラウザのパフォーマンスをどのように向上させることができますか? 理論的には、CSS が読み込まれると、ブラウザは各要素で何が起こるかを既に「認識」していますね。

それを効率的に使用する方法を示す良い例を追加できれば、私は感謝します:)

このCodePenを見て、私が何を意味するかを確認してください。

パースペクティブが適用された回転要素があり、その中には垂直方向に変換される「スクロール」div があります (各ページ内で div をスクロールする雑誌のページめくり体験を想像してください)。will-change: transform内側の divに追加したところ、外側のコンテナーが壊れましたoverflow: hidden。これは Chrome コンポジターのバグのようです。

誰かが回避策を知っていますか? will-changeモバイル Chrome でのアニメーションが大幅に高速化されるため、この属性を保持したいと考えています。

編集:これは will-change プロパティに固有のものではなく、内側の div を独自の合成レイヤーにするプロパティに固有のもののようです。プロパティを削除しwill-changeて変換を に変更するとtranslate3d、同様にパフォーマンスが向上し、バグが発生します。回転した親を正しくレンダリングできるようにする内部 div の唯一のクラスoverflow: hiddenは、2D 変換を追加するクラスです。

"waves-effect"だから私はMaterializeCSSをいじっていて、クラスでボタンを配置すると、すべてのテキストが滑らかになり、少しぼやけたものになることに気づきました。will-change: opacity, transform;消去法をやってみると、これが原因であることがわかりました。

これが違いです: http://imgur.com/a/3j1hm

この効果がどのように、または何が原因で発生するかを知っている人はいますか?

ありがとう。

will-changeCSSプロパティを「クリア」するための正しい値は何ですか? を使用してみ'auto'ましたが、Chrome Dev Tools (現在のバージョンの Chrome (46) と Canary (48) の両方) によると、これは無効なプロパティ値です。

will-changeアニメーションのパフォーマンスを向上させるために使用しようとしています。サイドメニューを移動して表示するために、アニメーションleft化するページコンテナがあります。padding-right

ボタンをクリックしてコンテナーを移動/メニューを表示すると、クラスがコンテナーの親に追加され、css が次のように変更されます。

will-change影響はないようです。私はそれを正しく使用していますか、またはどのように使用する必要がありますか?

この CSS ルールにより、独自の複合レイヤーに存在する 2 つの DOM 要素があります。

これで、Chrome 開発ツールの[レイヤーの境界線を表示] オプションを使用して、これらのレイヤーを調べることができます。

すべて素晴らしい！そして、これは私が見るものです

私はオレンジ色の境界線の色に精通しており、要素が独自の複合レイヤーに存在することを意味します。しかし、緑色は何を示しているのでしょうか?

すべての開発ツールのドキュメントは古くなっているようです。

パフォーマンスを向上させるために、htmlビデオタグでwill-changeプロパティを使用する利点はありますか?

その場合、ハードウェア アクセラレーションを使用して GPU でビデオを実行するには、どのように使用すればよいですか?

will-change(JS を使用して) 固定ボタンを追加すると、非常に不安定になることに気付きました。これは、「will-change」ボタンとボタンのないボタンの両方に適用されます。

問題を示す例: http://jsbin.com/kelajo/3/edit?html,css,js,output

問題を示す GIF: http://i.imgur.com/sTSkvFA.gifv

ラインを削除するwill-changeと、両方のボタンが機能し始めます。

これは Chrome の問題ですか、それとも何か不足していますか? ありがとうございました。