web-dev-qa-db-ja.com

Chromeでwebkit-transformを使用して回転するときの、誤ったテキストのアンチエイリアス

-webkit-transform: rotate()を使用して要素を回転し、Chrome 14.0.835.2 dev-mで、要素内のテキストに本当に奇妙な処理を行っています。 「クリスプ」ではなく「スムーズ」アンチエイリアスを使用してテキストを回転すると、Photoshopで得られる同様の効果。

誰がここで何が起こっているのか知っていますか？このWebkitに固有のものですか、それともChromeバージョンですか、それを修正するためにできることはありますか？（リスト要素間の境界線のアンチエイリアスも行いません）

Wonky text

CSSは次のとおりです。

div.right-column.post-it
{
  position: relative;
  width: 240px;
  background-color: #fe9;
  padding: 20px;
  -webkit-transform: rotate(.7deg);
  background: #fe9 -webkit-gradient(radial, 20% 10%, 0, 50% 10%, 500, from(rgba(255,250,220,1)), to(rgba(255,238,253,0)));
  box-shadow: 1px 1px 0 #ddccaa, 
            2px 2px 0 #dbcaa8,
            3px 3px 0 #d9c8a6,
            4px 4px 0 #d7c6a4,
            5px 5px 0 #d5c4a2,
            6px 6px 1px #d3c2a0,
            4px 4px 2px rgba(90,70,50,.5),
            8px 8px 3px rgba(90,70,50,.3),
            12px 12px 5px rgba(90,70,50,.1);
}
csswebkitrotationwebkit-transform
30
Rahul

WebkitでCSS 3d Transformモードをトリガーしてみてください。これにより、chromeのレンダリング方法が変わります

-webkit-transform: rotate(.7deg) translate3d( 0, 0, 0);

編集する

また、Webkitのみのスタイル宣言-webkit-font-smoothingは値を取ります

  • none
  • subpixel-antialiased
  • antialiased

どこ subpixel-antialiasedはデフォルト値です。

残念ながら、サブピクセルアンチエイリアスは、テキストを回転させるのに適したソリューションではありません。レンダリングマシンはそれを処理できません。 3D変換はantialiasedのみに切り替わります。ただし、直接設定することはできます。

こちらをご覧ください http://maxvoltar.com/archive/-webkit-font-smoothing

72
yunzen

フォントがぼやけるのは、-webkit-backface-visibilityを含む奇妙なWebkitの問題が原因です。これは私を理解するのに永遠にかかりました、そして私はまだウェブ上でそれをどこにも見ませんでした。

-webkit-backface-visibility：hidden;を追加しました。 CSSリセットスタイルとしてサイトの本文に追加します。サイト全体のフォントがシャープになるのを見てください。変換は3Dではないため、これは何にも影響しませんが、サイトの別の場所で3D変換を行うことにした場合は、-webkit-backface-visibility：visible;を追加してください。特定の要素に。ちらつきも修正する必要があります。

16
DMTintner