2

HTML5、CSS3、jQueryMobile を使用して非常に複雑な Web アプリを作成しました。

jQueryMobile は、translate3Dand/orを介してあちこちでハードウェア アクセラレーションをオンにしているようですtranslateZ。

ここで、特定の HTML 要素に対してこれをオフにしたいと考えています。

これは私に2つの質問を与えます：

  • 特定の要素のハードウェア アクセラレーションをオフにするようにブラウザーに指示するために使用できる css プロパティ/属性または何かがありますか?
  • translate3Dそうでない場合:またはが使用されている場所を見つけてtranslateZ、単純に削除する必要がありますよね? どうやってやるの？マークアップ全体は、多くの HTML 要素で非常に複雑です。インスペクターで各要素を調べて検索することはできません。

更新： これを修正したい理由

私の Web アプリには、スワイプ可能にする必要がある要素がいくつかあります (画像ギャラリーなど)。この場合、ハードウェア アクセラレーションが必要です。iScroll を必要とする div コンテナと、アニメーション化する必要がある他のすべての要素 (スライド アニメーションやフェード アニメーションなど) についても同様です。

ただし、静的な (アニメーション化されていない) アプリの多くの部分があります。Safari の特別な起動オプションを使用して、ハードウェア アクセラレーションが適用される部分を可視化することができました。このようにして、必要な部分だけでなく、アプリ全体がハードウェア アクセラレーションされることに気付きました。

IMHOこれは良いことではありません。

  • 全体を高速化すると GPU に大きな負荷がかかり、スクロール中にアプリ全体がカクカクします。
  • 私の知る限り、CPU に静的なものを実行させ、GPU は派手なアニメーション処理のみを処理するのがベスト プラクティスです。
  • アニメーションが終了したら、ハードウェア アクセラレーションを無効にする必要があります。ハードウェア アクセラレーションは不要になり、バッテリーの寿命が短くなるからです。
4

1 に答える 1

1

何千行もの CSS コードを調べた結果、次のことがわかりました。

.ui-page{-webkit-backface-visibility: hidden !important}

これはすべてのページでアクティブであり、問​​題の原因でした。その行を削除すると、修正されました。

于 2013-01-15T10:29:57.067 に答える