【UIを構築する全ての人へ】The nightmare of "fractional scaling"

はじめに（読んでね） 皆さんはUIを構築するときにこのような経験をしたことはないでしょうか？ 1pxを指定したのに、場所によって太く見えたり細く見えたりする 中央揃えしたはずのアイコンが、1px片側に寄って見える 黒い1pxの線を引いたはずが、灰色っぽい2pxの線に滲んでいる 隣り合う要素の間に、細い隙間や背景色の線がうっすら見える ウィンドウをリサイズすると、区切り線や要素の幅がチラチラ揺れる MacのRetinaでは綺麗なのに、125%や150%表示のWindowsノートで見ると滲む 自分の環境では再現しないのに、ユーザーからは「ぼやけている」と報告が来る これらの「あるある」は全てこの記事で原因を理解でき正しく対処できるようになる可能性があります。 また、記事の最後でスキルを配布しているので、新規でUIライブラリを開発する場合には利用を強く推奨します。 問題と発覚 ー 半年に及ぶ戦い

[mkusaka]

fractional scalingで1px線や隙間がズレ・滲む原因を、round順序と解決策(shared edge/事前丸め込み)で解説。