質問: ### 起きている問題 下記の「1番目の画像」と「2番目の画像」の選択されている要素はどちらも、 ``` width: 7.5vw; height: 0.15625vw; background-color: #111; display: block; margin-top: 1.328125vw; margin-bottom: 1.5625vw; ``` でcssが指定されていいます。 しかしながら、肉眼で見ると、1番目の画像の棒の方が大きく見えます(正確にいうと、太く見えます)。 これはブラウザの問題でしょうか?chromeを使用しています。 選択すると、両者ともにwidthが85.8pxでheightが1.78pxと全く同じ値です。 これの原因と解決方法がわかる場合、ご教示いただきたく存じます。 ### 1番目の画像 ![1番目の画像](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/68c9cd6ad51b7b92187e8bda7ea63a5a.png) ### 2番目の画像 ![2番目の画像](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/d38415dabf6ed772d39abcd9f6486341.png) ### 比較画像 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/b02816b4a5a3592752a70b04630b1cf8.png)
回答: 当方の環境(Firefox)で試したところ、ウィンドウサイズを変更していくと、2つの要素の見かけの太さが同じになったり違うように見えたりしました。 さらに、ズーム倍率を変更しても同様のことが起きました。 なので、おそらく、サブピクセルレンダリングの影響ではないかと思います。 ブラウザの小数点以下のピクセル(サブピクセル)レンダリングまとめ | masuP.net