web-dev-qa-db-ja.com

WebKit：CSSスケール+ translate3dを使用したぼやけたテキスト

Chromeおよび他のWebKitブラウザーは、translate3dが適用されているcssスケールのコンテンツを大幅にぼかしているという問題が発生しています。

ここにJSフィドルがあります： http://jsfiddle.net/5f6Wg/ 。 （Chromeで表示します。）

.test {
  -webkit-transform: translate3d(0px, 100px, 0px);
}

.testInner
{
  /*-webkit-transform: scale(1.2);*/
  -webkit-transform: scale3d(1.2, 1.2, 1);
  text-align: center;
}
<div class="test">
  <div class="testInner">
    This is blurry in Chrome/WebKit when translate3d and scale or scale3d are applied.
  </div>
</div>

これに関する既知の回避策はありますか？上記の簡単な例では、translate3dではなく、単純にtranslateを使用することができます。ここでのポイントは、コードを必要最低限​​のものにまとめることです。

css3webkitscaleblurrytranslate3d
55
phil

Webkitは、ハードウェア3Dアクセラレーションを提供するために、3D変換された要素をベクトルではなくテクスチャとして扱います。これに対する唯一の解決策は、テキストのサイズを大きくし、要素を縮小して、本質的に高解像度のテクスチャを作成することです。

こちらをご覧ください： http://jsfiddle.net/SfKKv/

アンチエイリアシングはまだ不足していることに注意してください（ステムが失われます）。

33
methodofaction

私はそれを使用していることがわかりました：

-webkit-perspective: 1000;

フォントまたはアイコンセットのコンテナでは、Android nexus 4.2の問題をしばらくの間テストした後、物事が鮮明になりました。

33
hallodom

Cssフィルター効果は、HTML要素の外観を操作できるグラフィカル操作です。 Chromium 19以降、これらのフィルターはGPUで高速化され、超高速になります。

CSS3には多数の標準フィルター効果が導入されており、そのうちの1つがぼかしフィッターです。

-webkit-filter: blur(radius);

「半径」パラメータは、画面上のピクセルが互いにブレンドする数に影響を与えるため、値を大きくすると、より多くのブラーが作成されます。もちろん、ゼロは画像を変更しません。

半径を0に設定すると、ブラウザでGPU計算が使用され、html要素が変更されないようになります。 「ハードエッジ」効果を適用するようなものです。

したがって、このぼやけた効果を修正するための最良の解決策は、次の簡単なコード行を追加することでした。

-webkit-filter: blur(0);

網膜スクリーンにのみ影響する既知のバグもあります。 （こちらを参照してください： なぜblur（0）が網膜スクリーンのWebkit/Chromeのすべてのテキストブラーを削除しないのですか？ ）。したがって、網膜でも機能するように、次の2行目を追加することをお勧めします。

-webkit-transform: translateZ(0);
29
maoosi

これを試して

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

または、より正確なアプローチのために、javascript関数を呼び出して、マトリックスの10進数値を削除して変換マトリックスを再計算できます。参照： https://stackoverflow.com/a/42256897/1834212

5
Miguel

ズームプラグイン（http://janne.aukia.com/zoomooz/）と組み合わせてisotopeプラグイン（http://isotope.metafizzy.co/index.html）を使用すると、この問題に遭遇しました。私のケースを処理するjqueryプラグインを作成しました。誰もが恩恵を受けることができるように、私はそれをgithubリポジトリに投げました。 - https://github.com/charleshimmer/jquery-hirestext 。

2
chuckles

Javascriptを使用してテキストを1ピクセル上に移動し、100ミリ秒後に1ピクセル下に移動しました。それはほとんど知覚的ではなく、問題をクロスブラウザで完全に解決しました。

0
Mixtelf