ブラウザに整数値ではない要素の幅と高さが指定されている場合、ブラウザはそれらをどのように処理しますか？
特に、
ブラウザーは、浮動小数点数と 1 ピクセル未満の値を処理するように設計されています。
ブラウザーが計算に浮動小数点数を使用することを示す簡単な例を確認するには、幅 3% の項目を作成し、サイズ変更時に Chrome 開発者ツールで計算されたプロパティを確認します。
次のように表示されます。
「35.296875」は、物理ディスプレイ (CRT、従来の LCD) で 1 ピクセルを 1 ピクセルにマップするディスプレイでは正確にレンダリングできません。ただし、新しい高密度ディスプレイは 1-1 とは異なる比率を使用しており、この分数値を概念的に使用して、より高い精度を提供できます。
低密度のディスプレイでも、小数の値がサブピクセル レンダリングのヒントになる可能性があります。サブピクセル レンダリングでは、ピクセルの赤、緑、青のコンポーネントを使用して、オブジェクトのエッジがピクセル値全体で可能な場合よりも滑らかに表示されます。
しかし、ブラウザがそのような数値をどのように処理するかは、正確には予測できません。(現在のところ) ブラウザーにボックスの幅を 31.5 ピクセルにするように要求して、一貫した、または意味のある結果を期待することはできません。一部のブラウザでは、小数値が切り捨てられます。その他は切り上げ/切り捨て。
サブピクセル レンダリングはテキストに一般的に使用され、ほとんどまたはすべてのブラウザーで非常にうまく機能しますが、ブラウザーごとに実装が異なり、開発者がこれの動作に影響を与えるためにできることはほとんどありません。
継承チェーンで非整数値が丸められるのはどの段階ですか?
ほとんど/すべての計算は浮動小数点数として実行され、丸めはプロセスの後半で発生するか、ブラウザの制御外で発生することさえあります。たとえば、ブラウザはアンチエイリアスを OS コンポーネントに委譲することがあります ( IE9 が Windows Direct2D および DirectWrite に行うように)。
CSS トランジションは、OS やハードウェア アクセラレーションと緊密に統合される場合があります。これは、浮動小数点値がブラウザーによって保持され、下層のレイヤーに渡される可能性が高いと思われる別のケースです。
コンテナの子の寸法が整数でない場合、子の長さまたは高さの合計が親要素の内側の幅/高さと等しくない場合はありますか?
パーセンテージ計算の結果として、古いブラウザー (IE7) でこれを見たことがあり50% + 50% > 100%ます。通常は、もっと複雑なことをしようとするまで問題にはなりません。余談ですが、アニメーションの一部として HTML 要素を正確に整列させようとすると、「1 ピクセルずつずれる」バグが発生するのを見たことがあります。
指定された非整数ディメンションは、パーセンテージ ベースのディメンションの非整数結果とは異なる方法で処理されますか?
最も近い整数に丸めますか、それとも切り捨てますか?
それは異なります。この古い回答は、それらが切り捨てられていると述べていますが、(Chrome 24 では) 丸めが表示されます (フィドルの例に注意してください)。同じマシン上での Chrome と Safari の違いに関する以前のコメントに注意してください。
パディングとマージンの非整数値はどうですか?
同じルール (またはその欠如) が適用されるようです。
すべての場合に浮動小数点値をどのように処理する必要があるかについての標準的な定義は見つかりませんでした。私が見つけることができる最も関連性の高い仕様canvasは、ピクセルについて語っています。
指定された座標がデバイスの座標空間に正確にマップされない場合のピクセルの丸めの処理は、この仕様では定義されていませんが、次の結果としてレンダリングに目に見える変化が生じてはなりません: [...条件のリスト...]
繰り返しますが、これは具体的に を扱っているセクションからのものですが、canvasほのめかしています: