web-dev-qa-db-ja.com

CSS変換によりSafariでちらつきが発生しますが、ブラウザの幅が2000px以上の場合のみ

あなたはその権利を読んだ。オフィスの複数のマシンでテストし、シナリオ間の唯一の違いはブラウザのサイズでした。同僚がそれを2000pxのスイートスポットに絞り込みました。ブラウザーのサイズをそれぞれ2000ピクセル以上に変更し、変換アニメーションの要素の上にマウスを置くと、ページ上のさまざまな要素（特にCSSグラデーション背景を持つ要素）がちらつきます。逆に、ブラウザーの幅を2000px未満に変更し、同じ要素にマウスを合わせても、ちらつきは発生しません。

誰もこの奇妙な行動を見ましたか？なぜ2000pxがマジックナンバーであり、2000pxで正確に何が起こるのでしょうか？

[〜＃〜] note [〜＃〜]—このサイトはまだ公開されていないため、スクリーンショット/ビデオ/リンクを実際に共有することはできません。そして、これは何よりもブラウザの問題であると思われるため、コードは比較的不要です。

注2—ここでの私の質問は、2000_pxのSafariで実際に何が起こるかということです。必ずしも_backface-visibility_またはtranslateZでちらつきを修正する方法ではありませんなど。理由は、サイト全体で_-webkit-font-smoothing: subpixel-antialiased;_を自由に使用し、これらのトリックのいずれかを使用すると、ページ全体でそのプロパティより優先され、すべてのテキストでアンチエイリアス/グレースケールがオンになります。

EDIT —さて、これを以前にやったことはありません。問題を再現するjsFiddleのコードを次に示します。 http://jsfiddle.net/brandondurham/ujPMK/embedded/result/

これを行うには、Safariを少なくとも2000px幅に設定する必要があります。

csscss3safaritransformcss-transitions
34
Brandon Durham

イライラする？

2000pxがマジックナンバーである理由の答えについては、EDIT4を参照してください。

試すことができることがいくつかあります。

  • ちらつく要素に-webkit-transform-style: preserve-3d;を追加します。

  • -webkit-backface-visibility: hidden;を要素に追加します
    ちらつき。

  • アニメーション要素を親の外側に移動します
    要素は内部にあります。

[〜＃〜] edit [〜＃〜]— Wesley Hales氏は、次のように述べました here すでに加速されたページの一部への加速」

コードなしでこれをデバッグするのを助けるのは難しいです。しかし、初心者には、safariでデバッグモードをオンにすることをお勧めします。 「defaults write com.Apple.Safari IncludeInternalDebugMenu -bool true」をターミナルに書き込みます。

この後、デバッグメニューが表示されます。 [描画/合成フラグ]> [合成枠を表示]を選択します。

これにより、レンダリングされているものを確認し、それによってハードウェアアクセラレーションの対象と除外対象を選択できます。

EDIT2—これもチェックアウトする価値があります。 fast-animation-with-ios-webkit

IOに関することですが、状況によっては、iOで動作するソリューションがosxでも動作することを経験しました。

EDIT3— 2000pxを超えるとどうなるかを尋ねるだけなら、iPhoneではWebKitがそれ以下のテクスチャを作成することを確認できます。 1024 x1024。要素がそれより大きい場合、複数のテクスチャを作成する必要があります。

テクスチャの制限に関するドキュメント

今、彼らがiPhoneでそれをするとき、彼らがOsXで同じことをしても驚かないでしょうが、より高い制限があります。

これがあなたのケースであるかどうかわからない。コードなしで伝えることは不可能です。

EDIT4—「TextureMapperTiledBackingStoreの実装は非常にシンプルで、OpenGLの2000x2000テクスチャサイズ制限を回避するためにのみ使用されます。」

したがって、要素が2000x2000より大きい場合、複数のテクスチャを作成する必要があります。

http://trac.webkit.org/wiki/CoordinatedGraphicsSystem

56
Spoeken

_-webkit-backface-visibility: hidden;_を翻訳要素に適用し、-webkit-transform: translate3d(0, 0, 0);をそのすべての子に適用すると、ちらつきが消えることがわかりました。

webkit-transformのwebkit-transitionのちらつきを防ぐ を参照してください。

30
Rupam Datta

フォントがちらつく場合は、次のCSSを使用します。

html,body {
    -webkit-font-smoothing: antialiased;    
}
8
Eugenio Enko

CSS3変換要素を適用した後、Chromeが少し「クリスピー」に見え、テキストが整列していないことに気付きました。Mathiasの解答はこれに影響しません。 webkitフィルター（つまり-webkit-filter: opacity(0.99999);）、適切にレンダリングされた要素、およびテキスト内の文字は整列されますが、その後、これらの要素は少しぼやけて見えます。

2
Miljan Puzović

まず第一に、ここで提供される素晴らしいソリューションのおかげです。過去には、コードに何か問題があるに違いないと思っていました。そうではなかった。また、アニメーションがスムーズに実行されなくなった場合、2000pxの境界線を推論しました。皆さんに感謝します

/*keep animation smooth in Safari above 2000px*/
@media ( min-width: 2000px ) {
    .boxContent {
        -webkit-backface-visibility: hidden;
    }
}

実際、クラスを追加した後、写真はアンチエイリアス処理されないため、これを条件付きで行いました。別の場所で

/*keep animation smooth in Safari above 2000px*/
.twothousand {
    -webkit-backface-visibility: hidden;
}

jQueryを介して追加のクラスを追加および削除しました。そのため、トランジションはスムーズで、終了後にレンダリングされます（クラスを再度削除します）少し複雑ですが、私にとってはうまく機能し、最終的に2000px以上のSafariでアニメーションがスムーズになります。素晴らしい仕事、みんな！

0
Garavani