60

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を使用できます。ここでのポイントは、コードを必要最低限​​のものまで取り除くことです。

4

8 に答える 8

36

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

ここを参照してください：http： //jsfiddle.net/SfKKv/

アンチエイリアシングはまだアンダーパー（ステムが失われている）であることに注意してください。そのため、テキストに少し影を付けてテキストを強化しています。

于 2011-11-07T15:37:42.543 に答える
35

私はそれを使用して見つけました：

-webkit-perspective: 1000;

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

于 2013-06-27T08:45:42.743 に答える
28

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

CSS3には、多数の標準フィルター効果が導入されています。そのうちの1つは、ブラーフィトラーです。

-webkit-filter: blur(radius);

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

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

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

-webkit-filter: blur(0);

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

-webkit-transform: translateZ(0);
于 2015-09-01T13:46:15.067 に答える
5

これを試して

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

または、より正確なアプローチとして、javascript関数を呼び出して、行列の10進値を削除することにより、変換行列を再計算できます。参照：https ：//stackoverflow.com/a/42256897/1834212

于 2016-03-09T13:26:00.247 に答える
2

アイソトーププラグイン（http://isotope.metafizzy.co/index.html）をズームプラグイン（http://janne.aukia.com/zoomooz/）と組み合わせて使用​​すると、この問題が発生しました。私は自分のケースを処理するためにjqueryプラグインを作成しました。誰かがそれから利益を得ることができる場合に備えて、私はそれをgithubリポジトリに投げました。-https ://github.com/charleshimmer/jquery-hirestext。

于 2012-09-11T20:10:20.223 に答える
0

javascriptを使用してテキストを1px上に移動し、100ms後に1px下に戻しました。それはほとんど知覚できず、問題を完全にクロスブラウザで解決しました。

于 2015-11-13T14:20:02.177 に答える
-1 
body {
-webkit-font-smoothing: subpixel-antialiased;
}

または、特定の要素にそれを置くことができると思いますが、サイト全体に影響を与える1つの要素に問題がありました。

カスタムフォント-フェイスフォントの問題だと思います。

于 2012-07-31T21:26:13.520 に答える
-2

Webkitは、ハードウェアの3Dアクセラレーションを提供するために、3D変換された要素をベクトルではなくテクスチャとして扱います。

これはそれとは何の関係もありません。エイリアシングの問題は、継続時間と方向の情報を追加することで修正できることに気付くでしょう（例：0.3線形）。実行時にすべてをレンダリングしようとしている牝馬がいる：

上記も同じです^

于 2012-01-30T17:12:11.240 に答える