疑似要素before,afterの位置指定で小数点を使うと画面によってはズレる

？

CSSの疑似要素でよく使うbefore,afterを使った際に、位置調整に小数点を使用するとディスプレイによっては表示がズレる

例

ラジオボタンを装飾したCSSがあります。

See the Pen 画面によってズレるCSS by umino (@mu_umino) on CodePen.

他のディスプレイで見ると↓

←MacBookの画面で見た時　EV2456で見た時→
どうしてか黒点の位置がズレます。

解決策

そもそも小数点を指定しない

黒点の箇所に

top: 2.5px;
left: 2.5px;

と小数点で指定したことが原因でした。
デザインの段階で数値指定が小数点にならないようにしたら良いので

.radio-label:before {
  /* もとは15px */
  width: 16px;
  height: 16px;
}
.radio-label:after {
  /* もとは2.5px */
  top: 3px;
  left: 3px;
}

と変更して解決しました。
0.25remとか書いてもズレるのでpxにした時小数点以下にならないようにしたらいいのかなあとぼんやり思いました。

---

仕事中にラジオボタンの位置がずれてる！でもこっちで見たらずれてない！でてんやわんやしたので、ディスプレイによってはズレるんだなあと学びを得ました。
小数点気をつけたい。

おしまい。