161

Google Chrome に最近のアップデートがあったようで、transform: scale(). 具体的には、私はこれをやっています：

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
  }

  100% {
    -webkit-transform: scale(1);
  }
}

Chrome でhttp://roukery.comにアクセスすると、メイン テキスト領域に問題が表示されます。これは以前は行われておらず、他の Webkit ブラウザー (Safari など) には影響していないようです。3D 変換で同様の問題を経験している人々に関する他の投稿がいくつかありましたが、このような 2D 変換については何も見つかりません。

どんなアイデアでも大歓迎です、ありがとう！

4

35 に答える 35

36

ここで他のすべてを試した後、この問題を最終的に修正したのは、プロパティを削除することでした。will-change: transform;何らかの理由で、Firefox ではなく、Chrome では恐ろしくぼやけたスケーリングが発生しました。

于 2019-01-07T22:21:00.823 に答える
31

ぼやけを改善するには、特に。Chrome では、次のようにしてみてください。

transform: perspective(1px) translateZ(0);
backface-visibility: hidden;

更新: パースペクティブは、ユーザーと z 平面の間に距離を追加します。これにより、技術的にオブジェクトがスケーリングされ、ぼやけが「永続的」に見えます。上記は、解決しようとしているぼやけを一致させているため、ダックテープperspective(1px)のようなものです。以下の css を使用すると、うまくいくかもしれません。

transform: translateZ(0);
backface-visibility: hidden;
于 2016-12-05T20:51:30.633 に答える
18

それ以外の

transform: scale(1.5);

使用して

zoom : 150%;

Chrome でのテキストのぼやけの問題を修正します。

于 2015-02-28T19:56:59.263 に答える
4

私の場合、次のコードはぼやけたフォントを引き起こしました:

-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);

zoom プロパティを追加するだけで修正されました。ズームで遊んで、次のことがうまくいきました：

zoom: 97%;
于 2017-01-04T17:10:02.537 に答える
3

zoom: 101%;ズームとスケールを組み合わせて使用​​できない場合は、複雑なデザインに使用してみてください。

于 2016-09-30T07:17:25.440 に答える
2

上記のどれも私にとってはうまくいきませんでした。

パースペクティブを追加するとうまくいきました

つまり、から

transform : translate3d(-10px,-20px,0) scale3d(0.7,0.7, 1)

私はに変更しました

transform : perspective(1px) translate3d(-10px,-20px,0) scale3d(0.7,0.7, 1)

于 2018-02-05T16:58:10.663 に答える
2

Chrome ではぼやけたテキストの問題に直面していましたが、Firefox では使用していませんでしたtransform: translate(-50%,-50%)。

さて、私は本当に次のような多くの回避策を試しました：

transform: perspective(1px);

filter: blur(0);

transform: translateZ(0);

backface-visibility: hidden;

これらのどれも私にはうまくいきませんでした。

最後に、要素の高さと幅を均等にしました。それは私のために問題を解決しました!!!

注:ユース ケースによって異なる場合があります。しかし、確かに試してみる価値があります！

于 2020-04-08T21:08:55.753 に答える
2

これは私のために働いたものです：

body { perspective: 1px; }

于 2021-06-30T21:16:21.140 に答える
0

cssだけで解決するのは難しいでしょう。

だから私はjqueryでそれを解決しました。

これは私のCSSです。

.trY {
   top: 50%;
   transform: translateY(-50%);
}

.trX {
   left: 50%;
   transform: translateX(-50%);
}

.trXY {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

これは私のjqueryです。

function tr_init() {
$(".trY, .trX, .trXY").each(function () {
    if ($(this).outerWidth() % 2 != 0) {
        var fixed_width = Math.ceil($(this).outerWidth() / 2) * 2;
        $(this).css("width", fixed_width);
    }
    if ($(this).outerHeight() % 2 != 0) {
        var fixed_height = Math.ceil($(this).outerHeight() / 2) * 2;
        $(this).css("height", fixed_height);
    }
})}
于 2020-05-22T06:44:11.623 に答える