heightの値は同じなのに肉眼で見ると違います。原因と解決法を教えていただきたく。

Question

起きている問題

下記の「1番目の画像」と「２番目の画像」の選択されている要素はどちらも、

    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番目の画像

2番目の画像

比較画像

Comments

[yambejp]

全部cssをとっぱらって
widthが85.8pxでheightが1.78px
だけ指定したcssで検証してみてください

[Daimian]

迅速なご回答、ありがとうございます！！
ご指摘いただいた内容で検証してみると、全く同じサイズ感で肉眼で確認できました。
しかしながら、今回はレスポンシブなサイトを作成しており、vwで指定することが求められているため、根本的な解決策にならず、悩んでおります。。

[yambejp]

単純に他のCSSが競合してサイズをおかしくしていることが
わかったので、順次追加しながら検証していけばいいでしょう

[Daimian]

そうか、そうですね。。そうでした。ありがとうございます。検証を進めます！

[Daimian]

https://codepen.io/moonglows76/pen/yyYrBZ/
ブラウザの計算処理方法が原因かもしれず、色々試してはいますが、vw指定ではなく、pxの固定値指定に結局なってしまいそうです。

Answer 1

当方の環境（Firefox）で試したところ、ウィンドウサイズを変更していくと、2つの要素の見かけの太さが同じになったり違うように見えたりしました。
さらに、ズーム倍率を変更しても同様のことが起きました。

なので、おそらく、サブピクセルレンダリングの影響ではないかと思います。
ブラウザの小数点以下のピクセル(サブピクセル)レンダリングまとめ | masuP.net

Comments

[Daimian]

ありがとうございます！どうやら確かに、ご指摘いただいたのが原因でしたので、vwみたいな相対値は諦めて、固定値で書くことにしました。ご回答ありがとうございました！