web-dev-qa-db-ja.com

Chromeで翻訳するとフォントがぼやけて見える

EDIT 2016-07-04（この質問が一般的になっているため）： これはChromeのバグです 。開発者は 積極的に修正に取り組んでいます 。

EDIT 2017-05-14バグは修正されたようです。修正は Chrome 6 で導入されます

EDIT 2018-05-04修正がマージされましたが、 バグはまだ存在しているようです 。

だから私はこのCSSによって画面の中央に配置されている非常に醜いウィンドウを持っています：

.popup
{
   position: fixed;
   top: 0;
   bottom: 0;

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

ただし、Chrome（フォントは本当にぼやけて見えます）では次のようになります）：

Chrome

しかし、Firefoxでは次のようになります。

enter image description here

transformルールを削除すると、テキストは再び見た目もサクサクしますが、正しく中央揃えされなくなります。

chrome://flagsに移動して#disable-direct-writeを実行すると、見栄えが良くなりますが、ユーザーがそれを実行することはないため、問題は解決しません。

ウィンドウを中央に配置したままフォントを見栄えよくするにはどうすればよいですか？

私のchromeバージョンは44.0.2403.155です

背景キャンバスにレンダリングするWebGLを使用したthree.jsデモがあります。デモを無効にすると、問題は発生しなくなります。

JSFiddle with the background 。

背景のないJSFiddle 。

htmlcssgoogle-chromechromium
30
joppiesaus

ピクセルの半分の問題。

試してください：transform: translate(-50%, -51%);

それが動作します！

6
egor.xyz

関連するディスカッションからの提案は私のために問題を解決しました： https://stackoverflow.com/a/46117022/7375996

いくつかのオフセットで計算を使用すると、私の場合の問題が解決しました：

transform: translate(calc(-50% + 0.5px), calc(-50% + 0.5px));
4
Dmitry.Kolosov

-webkit-filter: blur(0)は、WindowsのChrome）でぼやけたフォントを修正できることがわかりました：

JSFiddle

#projectPopup {
    ...
    -webkit-filter: blur(0);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
3
Sergey Denisov

アニメーションの後に変換の正規化を使用します。

変換X/Y正規化

または、ズームを2倍にしてテクスチャをスケーリングしてから、もう一度縮小します。他の複雑な変換や変換が原因でこれを適用できない場合があり、完全ではありません。

...{
zoom:2;
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
1
Miguel

私はさまざまな解決策をさまざまな、時には恐ろしい組み合わせで試しました：

  • translateYの代わりに_translate3d_
  • zoom:2; transform: scale(0.5);またはzoom:0.5; transform: scale(2);
  • transform: translate(calc(-50% + 0.5px), calc(-50% + 0.5px));
  • -webkit-filter: blur(0);
  • _perspective: 1000px_
  • scale(1.0, 1.0)
  • _-webkit-font-smoothing: subpixel-antialiased;_

2019年7月には機能しません。

私がモーダルで見つけた唯一の解決策は、中央に配置する必要があります-変​​換の代わりにflexbox配置を使用するには：変換します。

_.modal__container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
}

  .modal {
    box-sizing: border-box;
    max-width: 80%;
    max-height: 80%;
    padding: 20px;
    overflow-y: auto;
    background: #fff;
  }_
_<div class="modal__container">
  <div class="modal">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>_
1
Александр Михайлов

2019-04-15、まだChromeで起こっています。その変化position: fixedからabsoluteに修正：

.popup
{
   position: absolute;  <-- just like that
   top: 50%;
   left: 50%;

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

絶対値を使用すると、特定のケースに適する場合と適さない場合があります。ちょうど2セントです。

1
David Suarez

要素の高さは偶数でなければなりません https://prnt.sc/mtxxa2

0
user3382357