40
4

8 に答える 8

37

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

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

于 2013-04-10T06:03:53.200 に答える
8

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

html,body {
    -webkit-font-smoothing: antialiased;    
}
于 2015-11-18T22:03:32.507 に答える
3

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

于 2013-04-05T02:00:08.083 に答える
0

まず第一に、ここで提供される優れたソリューションに感謝します。私はいつも、自分のコードに何か問題があるに違いないと思っていました。そうではありませんでした。また、アニメーションがスムーズに実行されなくなったため、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 でのアニメーションがスムーズになりました。よくやったよ、みんな!!

于 2014-02-07T11:28:41.540 に答える