3

1sトランジションを使用してCSS3変換でDIVが回転するというこの問題があります。

OSX10.7.5のChrome23およびSafari6では、.rotate-divsの移行中に、他のコンテナのフォントがわずかに暗くなります。

これを引き起こす原因とそれを回避する方法についてのアイデアはありますか？

http://jsfiddle.net/tTa5r/

.rotate{
  background: green;
  -moz-transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}
.rotate.flip{
  -moz-transform: rotate(540deg);
  -webkit-transform: rotate(540deg);
  -o-transform: rotate(540deg);
  transform: rotate(540deg);
}

反転授業はjqueryを使用して追加/削除されます。

$('.rotate').on('click', function(){
  $(this).toggleClass('flip');
});​
4

3 に答える 3

4

-webkit-backface-visibility: 非表示;

私のためにも働いた...私が変換した要素にそれを追加する

ps以前の回答に投票しますが、十分な「評判」がなく、コメントする方法もわかりません。

于 2013-03-08T12:51:01.510 に答える
2

追加

-webkit-backface-visibility: hidden;

影響を受けるすべての要素に、その問題を解決するようです: http://jsfiddle.net/tTa5r/2/

このプロパティが正確に何をするのかはわかりませんが、フォントのレンダリングに何かをしているようです: http://jsfiddle.net/tTa5r/ vs http://jsfiddle.net/tTa5r/2/

……嫌かどうかはわからないけど。

ここにあります：iPhone WebKit CSSアニメーションはちらつきを引き起こします

于 2012-12-28T15:53:00.097 に答える
1

backface-visibility プロパティは、要素が画面の反対側を向いているときに要素を表示するかどうかを決定します。これは、通常、要素を「反転」するときに使用されます。

この場合、次を追加した場合と同じ効果があるようです。

-webkit-transform: translate3d(0,0,0);

デモ - http://jsfiddle.net/tTa5r/4/

これにより、ハードウェア アクセラレーションが強制され、わずかに薄くなります (アンチエイリアス) が、遷移の前後でより一貫したフォント レンダリングが得られます。

3 番目のオプションもあり、それは追加することです。

-webkit-font-smoothing: antialiased;

デモ - http://jsfiddle.net/tTa5r/3/

私は以前に同様の質問に回答し、@mddw がアンチエイリアスの方法を説明するブログ投稿にリンクするコメントを投稿しました。

http://cantina.co/2012/05/18/little-details-subpixel-vs-greyscale-antialiasing/

それが役立つことを願っています!

于 2012-12-29T11:15:46.817 に答える