web-dev-qa-db-ja.com

CSSの翻訳後に「ピクセルにスナップ」することは可能ですか？

モーダルボックスを作成し、 （Chris Coyerが言及したテクニック ）を使用して垂直方向の中央に配置しました。これまで私が見つけた唯一の問題は、ボックスが半ピクセルずれることがあり、これによって一部の子が少し不安定に見えることがあります。私の質問は、結果を最も近いピクセル全体にスナップすることは可能ですか？

更新

問題をよりよく説明するための写真をいくつか示します。この最初の画像では、テキスト入力とリンクの下線が正しくレンダリングされていることがわかります。

Modal box with crisp lines

2番目の画像は、CSS変換が使用された後の効果を示しています。リンクの下線のぼやけと、正しくレンダリングされないテキスト入力に注意してください。

enter image description here

2番目の画像には表示されていませんが、上と下の白い線に同じぼかし効果が見られることがあります。

記録のために、テキスト入力は単純な境界線と背景色を使用してスタイル設定されています。これらの入力のCSSをここに含めたので、特別なことは何もないことがわかります。

input {
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-radius: 0;
    box-shadow: 0 1px 3px -1px #D5D5D5 inset;
    color: #4C4C4C;
    display: inline-block;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    max-width: 100%;
    padding: 5px;
    transition: border-color 0.1s ease 0s;
}
csstransform
32
James Long

唯一の防弾ソリューションは、要素がevenピクセル数を占めるようにすることです。高さ（または幅）が2で割り切れない場合は、要素を半ピクセルでレンダリングしようとするため、ぼやけが発生します。

Firefoxは真のサブピクセルレンダリングをサポートしているため、この問題はありません。したがって、要素がハーフピクセル上にあっても、Firefoxはそれをエレガントに処理します。

私の経験では、Webkitは通常、要素を最も近いピクセルにスナップします-（たとえば、letter-spacingプロパティ）-したがって、translateに対して同じように動作しないのはちょっと奇妙です。

7
derrylwc

一部のブラウザでは、3D変換を回避し、代わりに2D変換を使用できます。変換はデフォルトでピクセルにスナップします。

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

rendering is snapped to pixels

transform: translate3d(-50%, -50%, 0);

rendering is anti-aliased

JSBin：http://jsbin.com/epijal/3/edit

4
brianpeiris

Chromeのサブピクセルで同じ問題が発生し、バージョン64でもサブピクセル変換値を処理できないため、サブピクセルの問題を修正する小さなjsスクリプトを作成することにしました。 github 。変換値をピクセル全体に丸めるだけです。

how subpixel works

誰かがそれが役に立てば幸いです！

1
engray

私はいつもperspective: 1px;、 例えば：

{
  margin: 50% 0 0 50%;
  perspective: 1px;
 transform: translate(-50%, -50%);
}
0
user1696257