サブピクセルのレンダリングの注意点

コンテナや画像サイズの小数点には気をつけなくちゃいけない……というお話です。

問題点

あるカードパーツの実装をしていたところ、自宅用モニターでブラウザ幅を広げて閲覧した際、カード画像とカード枠の間に1px程度の隙間ができてしまっていました。



しかし、社内用の別モニターではどれだけブラウザを広げても隙間が確認できなかったため、なぜこういった現象が起きてしまうのか途方に暮れていました。

原因

この現象ですが、サブピクセルのレンダリングが原因のようです。
1px以下の処理方法がディスプレイごとに異なるため、使用しているディスプレイによって見え方が異なってしまうのです。
もしやと思い該当するコンテナーサイズを確認したところ、見事に小数点が生まれていました。

この1px以下の数値（すわなち小数点）が生まれることによって、ディスプレイごとに見え方が異なっていたのですね。
ちなみに、該当スタイルの指定方法は

grid-template-columns: repeat(3,1fr);

のように、コンテンツは可変になるよう指定していました。

レスポンシブが主流の場合、どうしてもコンテナーサイズを可変させたい場合が多いと思いますが、可変にしてしまうと予期せぬところで小数点が生まれて、予期せぬ隙間が発生してしまう可能性があります。

解決法

今回は固定値で指定しても支障のない箇所だったため、余白が現れないことを優先し、小数点のない固定値を指定することで解消しました。
ただ、固定値指定が相応しくない箇所もあるかと思います。
Webサイトはコンテンツがどうしても流動的なものになってしまうので、多少のレンダリングによる差異は許容しつつも、要所要所で注意する必要があります。