13

css3 変換がページ上の他の要素に影響を与え、ちらつきを引き起こすという問題があります。これに関する別の投稿を見ましたが、問題の解決策はありませんでした。

http://scosha.mybigcommerce.com/w107b/ナビゲーションをスクロールすると、css3 変換のアニメーションが表示されます。Firefox ではちらつきなく正常に動作しますが、クロムとサファリでは効果が非常に明白で、ドロップダウン メニュー項目とフッター テキストに表示されます。

4

4 に答える 4

29

Chrome で遷移中に要素がちらつくための実用的な解決策は、親ノードの CSS を設定することです。

-webkit-backface-visibility: hidden;

于 2013-11-06T16:19:37.047 に答える
12

私にとっての解決策は、影響を受けるすべての要素の親に次の css を適用することでした。 

-webkit-transform-style: preserve-3d;
-webkit-transform:translate3d(0,0,0);
于 2015-01-09T15:27:01.357 に答える
11

これは、 Chrome 22 (および明らかに Safari) での Macintosh テキスト レンダリングに関する既知の問題です。GPU アクセラレーションにより、MacOS がサブピクセルからグレースケール アンチエイリアシングに切り替わり、フォントの重みが著しく減少したように見えます。

アップデート：

OP が以下に示すように、修正を適用することです。これにより、-webkit-font-smoothing: antialiasedグレースケールのアンチエイリアシングが常に適用されます。これを行う場合、グレースケールのアンチエイリアス処理されたテキストはサブピクセルよりも著しく薄く見えるため、フォントの重みを全体的に増やしたいと思うでしょう。

コンテンツが常に GPU アクセラレーションされるようにするプロパティ (back-face-visibility: hidden など) を適用することで同じ効果を得ることができますが、これらは将来のブラウザー バージョンで GPU アクセラレーションを引き起こすことが保証されていないためです。グレースケールを指定するだけです。

于 2012-10-11T00:31:16.120 に答える
-3

Chrome で同じ問題が発生しましたが、Firefox では発生しませんでした。

一時的な修正は、修正を追加しweb-kitてトランジションを削除することです。

-webkit-transition: none;
于 2012-10-13T01:48:31.837 に答える