私は現在、Safari の非常に苛立たしいバグと戦っています。
イベントをトリガーするほとんどの要素 (ただし、すべてではなく、差別化要因を見分けることはできません) により、遷移focus
またはアニメーション化されたページ上のすべての要素が、上部と左側に ~2px ジャンプするようです。これは、ページが読み込まれた後の最初のフォーカス イベントでのみ発生します。
バグはdroplr.comのログイン部分にあるため、少し面倒です。JSFiddleの単純なケースを完全に抽出することはできませんでした。
アカウントを持っている/作成してログインしている場合は、この編集アイコンをクリックしてドロップします。
ページの最初の焦点であることがわかります。これは、ページに 1 つのドロップがあり、問題のある要素にフォーカスをトリガーしたときのタイムラインです。
より多くのドロップを使用しても、ほぼ同じですが、約40個のペイントが最大になるようです. また、プロファイラーは悪意のあることを何も示唆していません。jQuery の内部を簡単に説明します。
translate3d
またはを介して要素をレイアウトする代わりに、matix3d
単純に and を使用するtop
とleft
、このバグはなくなります。これを何時間もデバッグした後、私は完全に途方に暮れています。
誰かが似たようなものを見たことがあること、見てみることができること、または次のステップのデバッグについてアドバイスをくれることを願っています.
本当にありがとう!
更新: Dave Desandroは、それが 3D アクセラレーションの開始であると示唆したので、代わりに を使用して試してみましたが、translate
確かに、ジッターは発生しませんでした。focus
ただし、ハードウェアアクセラレーションがイベントで起動する理由はわかりませんが、一度だけです。
ページの読み込み時に transformZ を 0 に設定してハードウェアを強化しようとしましたが、うまくいきませんでした。これ以上のアイデアは大歓迎です。