37

私は現在、Safari の非常に苛立たしいバグと戦っています。

イベントをトリガーするほとんどの要素 (ただし、すべてではなく、差別化要因を見分けることはできません) により、遷移focusまたはアニメーション化されたページ上のすべての要素が、上部と左側に ~2px ジャンプするようです。これは、ページが読み込まれた後の最初のフォーカス イベントでのみ発生します。

バグはdroplr.comのログイン部分にあるため、少し面倒です。JSFiddleの単純なケースを完全に抽出することはできませんでした。

アカウントを持っている/作成してログインしている場合は、この編集アイコンをクリックしてドロップします。

ここに画像の説明を入力

ページの最初の焦点であることがわかります。これは、ページに 1 つのドロップがあり、問題のある要素にフォーカスをトリガーしたときのタイムラインです。

ここに画像の説明を入力

より多くのドロップを使用しても、ほぼ同じですが、約40個のペイントが最大になるようです. また、プロファイラーは悪意のあることを何も示唆していません。jQuery の内部を簡単に説明します。

translate3dまたはを介し​​て要素をレイアウトする代わりに、matix3d単純に and を使用するtopleft、このバグはなくなります。これを何時間もデバッグした後、私は完全に途方に暮れています。

誰かが似たようなものを見たことがあること、見てみることができること、または次のステップのデバッグについてアドバイスをくれることを願っています.

本当にありがとう!

更新: Dave Desandroは、それが 3D アクセラレーションの開始であると示唆したので、代わりに を使用して試してみましたが、translate確かに、ジッターは発生しませんでした。focusただし、ハードウェアアクセラレーションがイベントで起動する理由はわかりませんが、一度だけです。

ページの読み込み時に transformZ を 0 に設定してハードウェアを強化しようとしましたが、うまくいきませんでした。これ以上のアイデアは大歓迎です。

4

7 に答える 7

1

私はしばらく前にこの問題を抱えていましたが、正直なところ、原因が正確に何であったかは覚えていませんが、私が実行した手順のいくつかを次に示します。

次の行の同じ要素にhide()とshow()がないこと、またはその逆のことを確認してください。例:el.show()el.hide()

カスタムフォントを「Arial」に変更します

フォーカスイベントが不要な要素については、スクリプトの下部に次のコードを追加します。 noFocusElem.off('focus'); これにより、誤って追加した可能性のあるフォーカスハンドラーがすべて削除されます。

最後に、スクリプトの前にcssを配置します。インラインスタイルが適用された後にcssルールを追加すると、特にline-hieghtプロパティを使用している場合に、ジッターが発生する可能性があることは周知の事実です。

お役に立てれば :)

于 2013-03-19T02:02:43.090 に答える
0

ちょうど私の2cの価値があります。

私が最初に試すこと: まずクロムで、「about:flags」を叩きます (はい、Chrome を使用していないことはわかっています)。「合成レンダー レイヤーの境界線」を見つけてオンにします。この機能をオンにすると、レンダリング/ハードウェア アクセラレーションの対象を大まかに把握できます。

参照: http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome

レンダリングの問題を探します。これらは通常、Z インデックスが原因です。レンダリングの問題が解決されるまで、任意の z インデックスを試して、特定の要素を非表示/表示します。そんでそこから作業。translate-z のハックと不透明度も問題を引き起こす可能性があります。

経験から、他の Webkit ブラウザーでのレンダリングの問題は、chrome を使用して診断できることがわかりました。ちらつきは、標準の Android ブラウザでよく発生します。

次に、フォーカス イベント自体を調べて、デフォルトの動作を防止するなどのことを試してください。私には遠いショットのように思えますが、試してみてください。

于 2013-06-14T14:18:43.123 に答える
0

私はこの質問が少し前に投稿されたことを知っています.これは少し長いショットですが、ここに行きます:

出発点として、クロムに戻り、複合レイヤーを見てください。

これをアドレスバーに入力します: about:flags

そこから複合境界線を有効にすることができます。赤い枠は通常、レンダリングの問題を示しています。

http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome

私が時々見つけたのは、Chrome にはレンダリングの問題がありますが、ブラウザーはそれらを私から隠すことにかなりうまく対処しているということです。ただし、他の Webkit ベースのブラウザーでは、結果がより目立つ場合があります (つまり、Android)。

また、Z インデックスを変換中のコンテンツと組み合わせて使用​​すると、ちらつきが発生することも確認しました。

いずれにせよ、この問題をどのように解決したかをお知らせいただければ幸いです (解決した場合)。おそらくあなた自身の質問への回答を投稿してください。

于 2012-12-31T09:36:56.297 に答える
0

カスタム フォント キットを使用しているときに、この問題が発生しました。これが問題でしょうか?一部のイベントによってカスタム フォントが再描画され、ページ表示にごくわずかな「ジッター」が発生することがあります。

場合によっては、すべての親 HTML 要素の高さと幅を手動で設定すると、ちらつきを減らすことができます。

于 2012-04-07T23:34:06.907 に答える