web-dev-qa-db-ja.com

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変換については何も見つかりません。

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

google-chromecss3webkittransformcss-animations
96
Ryan O'Rourke

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

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

backface-visibility: hidden;

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

transform: translateZ(0);

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

-webkit-font-smoothing: subpixel-antialiased;

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

63
2ne

ぼやけを改善するには、特に。 Chromeでは、これを試してください：

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

UPDATE：パースペクティブ ユーザーとzプレーン間の距離を追加します。パーマネント」。上記のperspective(1px)は、duck-tapeのようなものです。これは、解決しようとしている不鮮明さを一致させているためです。以下のcssでより良い運が得られるかもしれません。

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

縮尺比の調整が少し役立つことがわかりました。

(1.05)を介してscale(1.048)を使用すると、ピクセル全体のフォントサイズにより近い近似が生成され、サブピクセルのぼかしが減少するように見えました。

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

14
Jordan Nakamoto

の代わりに

transform: scale(1.5);

を使用して

zoom : 150%;

chromeでのテキストのぼかしの問題を修正します。

13
Naisheel Verdhan

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

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

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

それほぼ完全に機能しました。 「Almost」はトランジションを使用しているため、トランジション中は要素が完璧に見えませんが、トランジションが完了すると要素が完成します。

6
ruidovisual

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

filter: blur(.0px)
6
andyw

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

ここで言及した解決策はいずれも機能せず、まだ解決策はないと思います（これを書いている間にChrome 62.0.3202.94を使用）。

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

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

NOTE

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

4
scipper

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

4
Dan

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

3
Tom Roggero

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

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

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

zoom: 97%;
3
Raza Ahmed

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

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

2
Corentin

私ははるかに優れたクリーンなソリューションを見つけました：

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

または

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

この投稿に感謝します： 変換によるぼやけたレンダリングの防止：スケール

1
Gabriel G

以下を追加することでケースを修正しました。

transform: perspective(-1px)
1
Anders Lund

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

視点を追加するとうまくいきました

すなわち

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

に変わった

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

1
Sengupta Amit

これを修正するには、css filterを使用できます。

.element {
    filter: blur(0);
}

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

0
sunderls

私はすべての答えを組み合わせて使用​​しましたが、これが最終的に私にとってうまくいったものです：

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

上記のどれも私にとってはうまくいきませんでした。ポップアップ用にこのアニメーションがありました：

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

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

0
Gendos-ua

5-25-19現在のChrome 74.0.3729.169では、特定のブラウザーのズームレベルでの変換によるブラーの修正は行われていないようです。単純なTransformY(50px)でも、要素がぼやけます。これは、Firefox、Edge、Safariの現在のバージョンでは発生せず、すべてのズームレベルで発生するわけではありません。

0
Austin McCool

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

transitiontransformを使用しない場合、テキストはぼやけません。

これを行うだけです：

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

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

0
kyw

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

0
Normangorman

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

ぼかしがなくなりました！

0
Tanha Islam