CSS変換を使用した後のぼやけたテキスト：scale（）; Chromeで

最近の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://rourkery.comにアクセスすると、メインテキスト領域に問題が表示されます。これは以前は行われていなかったため、他のWebkitブラウザー（Safariなど）に影響を与えていないようです。3D変換で同様の問題が発生している人々に関する他の投稿がいくつかありましたが、このような2D変換については何も見つかりません。

どんなアイデアでも感謝します、ありがとう！

私は何度もこの問題を抱えており、それを修正する方法は2つあるようです（以下を参照）。これらのプロパティのいずれかを使用して、レンダリングを修正することも、両方を同時に修正することもできます。

背面の可視性を非表示にすると、オブジェクトの前面だけにアニメーションが簡略化されるため、問題が解決します。デフォルトの状態は前面と背面です。

backface-visibility: hidden;

TranslateZは、アニメーションにハードウェアアクセラレーションを追加するハックでもあるので機能します。

transform: translateZ(0);

これらのプロパティは両方ともあなたが抱えている問題を修正しますが、一部の人々は追加したい

-webkit-font-smoothing: subpixel-antialiased;

アニメーション化されたオブジェクトに。Webフォントのレンダリングを変更できることがわかりましたが、その方法も自由に試してみてください。

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

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

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

transform: translateZ(0);
backface-visibility: hidden;

縮尺比を調整すると、わずかに役立つことがわかりました。

scale(1.048)over を使用する(1.05)と、ピクセル全体のフォントサイズにより近い近似が生成され、サブピクセルのぼやけが軽減されたようです。

またtranslateZ(0)、変換アニメーションでChromeの最終的な丸めステップを調整するように見えるものを使用しました。これは、速度を上げて視覚的なノイズを減らすので、私のホバー使用にはプラスです。ただし、onclick関数の場合、変換されたフォントがサクサクしていないように見えるため、私はそれを使用しません。

運の悪い状態で他のすべてを試した後、この問題を最終的に解決したのは、プロパティを削除するwill-change: transform;ことでした。何らかの理由で、Chromeではひどくぼやけた外観のスケーリングが発生しましたが、Firefoxでは発生しませんでした。

の代わりに

transform: scale(1.5);

を使用して

zoom : 150%;

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

これはChrome（バージョン56.0.2924.87）のバグであるに違いありませんが、コンソール（ '.0'）でcssプロパティを変更したときのぼやけが修正されています。報告します。

filter: blur(.0px)

サンデルスは私を答えに導きます。例外filter: scaleは存在しませんが、存在filter: blurします。

ぼやけて見える要素に次の宣言を適用します（私の場合、変換された要素内にあります）：

backface-visibility: hidden;    
-webkit-filter: blur(0);

それは、ほぼ完全に働きました。「ほぼ」私はトランジションを使用しているため、トランジション中は要素が完全に表示されませんが、トランジションが完了すると、要素は完全に表示されます。

私は、問題が相対変換で何らかの方法で発生することを発見しました。translateX（50％）、scale（1.1）など。絶対値を指定すると常に機能します（ぼやけたテキスト（ures）は生成されません）。

ここで言及されている解決策はどれも機能しませんでした。解決策はまだないようです（これを書いているときにChrome 62.0.3202.94を使用しています）。

私の場合transform: translateY(-50%) translateX(-50%)、ぼかしが発生します（ダイアログを中央に配置したい）。

もう少し「絶対的な」値に到達するには、10進数の値をに設定する必要がありましたtransform: translateY(-50.09%) translateX(-50.09%)。

注意

この値は画面サイズによって異なることは間違いありません。誰かを助けるために私の経験を共有したかっただけです。

私ははるかに優れたクリーンな解決策を見つけました：

.element{
 transform:scale(0.5) 
 transform-origin: 100% 0;
}

または

.element{
 transform:scale(0.5) 
 transform-origin: 0% 0;
}

この投稿のおかげで： 変換によるぼやけたレンダリングの防止：スケール

追加perspective(1px)は私のために働いた。

transform: scale(1.005);

に

transform: scale(1.005) perspective(1px);

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

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

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

ズームプロパティを追加するだけで修正されました。ズームで遊んでください、私のために働いた後：

zoom: 97%;   

Chromeでぼやけた変換（translate3d、scaleX）で見つけたばかりの別の修正は、要素を「display：inline-table ;」として設定することです。場合によっては（X軸上で）ピクセルの丸めを強制するようです。

Chromeでのサブピクセルの配置は意図したものであり、開発者は修正しません。

2019 Update
Chromeディスプレイのバグはまだ修正されておらず、常連客の責任ではありませんが、このWebサイト全体で提供されている提案のいずれも問題の解決に役立ちません。私はそれらすべてを無駄に試したことに同意することができます：1つだけが近くに来て、それはcssルールです：filter：blur（0）; これにより、コンテナが1ピクセル移動することはなくなりますが、コンテナ自体およびコンテナに含まれるコンテンツのぼやけた表示バグは解決されません。

これが現実です。文字通りこの問題は修正されていないため、流動的なWebサイトの回避策を次に示します

ケース
私は現在、流動的なWebサイトを開発しており、3つのdivを持っています。すべての中央にホバー効果があり、幅と位置の両方でパーセント値を共有しています。Chromeのバグは、left：50％に設定されている中央のコンテナで発生します。変換：translateX（-50％）; 一般的な設定。

例：最初にHTML ...

<div id="box1" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

<div id="box2" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

<div id="box3" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

Chromeのバグが発生するCSSは次のとおりです...

*{margin:0; padding:0; border:0; outline:0; box-sizing:border-box;  background:#505050;}
.box {position:absolute; border:1px solid #fff; border-radius:10px; width:26%; background:#8e1515; padding:25px; top:20px; font-size:12pt; color:#fff; overflow:hidden; text-align:center; transition:0.5s ease-in-out;}
.box:hover {background:#191616;}
.box:active {background:#191616;}
.box:focus {background:#191616;}
#box1 {left:5%;}
#box2 {left:50%; transform:translateX(-50%);} /* Bugged */
#box3 {right:5%;}

これが固定CSSです...

*{margin:0; padding:0; border:0; outline:0; box-sizing:border-box;  background:#505050;}
.box {position:absolute; border:1px solid #fff; border-radius:10px; width:26%; background:#8e1515; padding:25px; top:20px; font-size:12pt; color:#fff; overflow:hidden; text-align:center; transition:0.5s ease-in-out;}
.box:hover {background:#191616;}
.box:active {background:#191616;}
.box:focus {background:#191616;}
#box1 {left:5%;}
#box2 {left:37%;} /* Fixed */
#box3 {right:5%;}

盗聴フィドル： https://jsfiddle.net/m9bgrunx/2/
固定フィドル： https://jsfiddle.net/uoc6e2dm/2/

ご覧のとおり、CSSを少し調整するだけで、配置にトランスフォームを使用する必要性が減少またはなくなります。これは、固定幅のWebサイトや流体にも適用できます。

私にも同じ問題があります。私はこれを使ってこれを修正しました：

.element {
  display: table
}

上記のどれも私のために働いていません。私はポップアップのためにこのアニメーションを持っていました：

@keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}

私の場合、このルールを適用した後、ぼやけた効果はなくなり -webkit-perspective: 1000;ました。Chromeインスペクターで未使用としてマークされているにもかかわらずです。

私の解決策は：

表示：初期;

それからサクサクした鋭い

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

遠近法を追加するとうまくいきました

すなわちから

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

に変わった

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

以下を追加してケースを修正しました：

transform: perspective(-1px)

CHORMEの場合：

ここですべての提案を試しました。しかし、うまくいきませんでした。私の大学は優れた解決策を見つけました。

1.0を超えてスケ​​ーリングしないでください

またtranslateZ(0)、ホバーに含めますが、ホバーなし/初期位置には含めません。

例：

a {
    transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    transform: scale(0.8, 0.8);
}

a:hover {
    transform: translateZ(0)scale(1.0, 1.0);
}

私はすべての答えを組み合わせて使用​​しましたが、これが結局私にとってうまくいきました：

.modal .modal--transition {
  display: inline-table;
  transform: perspective(1px) scale(1) translateZ(0);
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
}

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

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

transform: perspective(1px);

filter: blur(0);

transform: translateZ(0);

backface-visibility: hidden;

これらのどれも私には役に立たなかった。

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

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

私はこれらの答えから多くの例を試しましたが、残念ながら、Version 81.0.4044.138 代わりに要素の変換に追加したChrome には何の助けにもなりません

 transform-origin: 50% 50%;

これです

 transform-origin: 51% 51%;

それは私に役立ちます

私にとって問題は、私の要素がを使用していたことでしたtransformStyle: preserve-3d。これは実際にはアプリに必要ではないことに気付き、それを削除するとぼけが修正されました。

これをコードから削除し、これ transform-style: preserve-3d; を追加しましたtransform: perspective(1px) translateZ(0);

ぼやけが消えました！

Chrome 74.0.3729.169（5-25-19現在）では、変換によって引き起こされる特定のブラウザーズームレベルで発生するぼかしの修正はないようです。単純なものでもTransformY(50px)要素をぼかします。これは、Firefox、Edge、またはSafariの現在のバージョンでは発生せず、すべてのズームレベルで発生するとは限りません。

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);
    }
})}

修正の流行に追加するために、見栄えの悪いオブジェクトの周りに{border：1px solid＃???}を配置すると、問題が解決します。安定した背景色がある場合は、これも考慮してください。これは、私が推測することについて言及することについて誰も考えたことがないので、馬鹿です。

あなたはCSSを使うことができます filterをしてこれを修正。

.element {
    filter: blur(0);
}

ベンダープレフィックスについてはご自身で行ってください。-webkit-filter、-ms-filter。詳細はこちら http://browser.colla.me/show/css_transformation_scale_cause_blurring

そうしない場合は、テキストがぼやけることはありません。transitiontransform

これを行うだけです：

&:hover {
    transform: scale(1.1);
}

のような移行 なしtransition: all .2s;