border,box-shadowとtransform(scale())を併用した際の試行錯誤

ホバー時にテキスト横の黒丸がリング風になって拡大するアニメーション

<img width="200" alt="Animation.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2003838/b684b989-b927-b95f-a9a8-7987089f40a3.gif">

を、当初borderとtransform(scale)で実装した。
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="YzYOZLG" data-user="c_niikura" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/c_niikura/pen/YzYOZLG">
  hoverDot01</a> by chiho niikura (<a href="https://codepen.io/c_niikura">@c_niikura</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

全体の大きさはhover前6px→hover時30px、中の丸が6pxの想定。scaleで5倍拡大するので、borderは12px÷5=2.4px
なんだけど、中の丸がどうも6pxになってないっぽい。
Chromeの検証でみると、

<img width="200" alt="retinaのほう.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2003838/2de3275c-10f0-eec4-5cb8-38f13ff55d84.png">

border-widthが少し小さい・・？
メインの検証画面はRetinaディスプレイだったが非Retinaディスプレイで確認した時は以下。

<img width="200" alt="Animation.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2003838/5c974098-f153-62ee-53e5-b6e12a8eb023.png">

明らかにborder-widthが小さい。結論：どちらにせよborder-widthが小さい。
borderに50%の角丸をつけると四角は丸になる。そのため四角の辺＝円の直径となると認識していたが、
ドーナツ状の表現に限り違ってくる？

<img width="400" alt="sheet1.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2003838/739d24ad-4161-526d-e2de-3ba7eea2af5a.jpeg">

悩んだ結果borderをbox-shadowに変えて実装してみる。
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="XWVPRad" data-user="c_niikura" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/c_niikura/pen/XWVPRad">
  hoverDot02</a> by chiho niikura (<a href="https://codepen.io/c_niikura">@c_niikura</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

要素の内側にbox-shadowで色をつける。
すると中の丸が正常な大きさになった。よかった～。
と思ったら、MacのSafariだとアニメーション時にガビガビになるらしい。ついでにまた中の丸が大きい。

<img width="200" alt="inMac.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2003838/73252c05-acc5-1565-cf00-f22103e03edb.gif">

検証のかぎり、transform(scale)を使うとbox-shadowがどうしてもぼやつく。そのためscaleは使わないで実装する。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="mdpGWMO" data-user="c_niikura" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/c_niikura/pen/mdpGWMO">
  hoverDot01</a> by chiho niikura (<a href="https://codepen.io/c_niikura">@c_niikura</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

ちなみにscaleを使わずにbox-shadowの幅だけで大きさを表現すると中心位置がずれるので、positionの絶対値から自身の大きさの半分を反対側にずらし中心を確保しておく。

=================

検証途中で見つけた以下の記事のように、box-shadowあるいはborderとtransform(scale)の組み合わせは常にボヤつくから厳禁！という訳でもないはず。
https://stackoverflow.com/questions/49442721/unable-to-animate-transform-scale-and-box-shadow-simultaneously

ただ濃い色の使用・急激な拡大率・box-shadowで設定する・小数点を使うのはどうしても相性が悪いのかもしれない。よく分からない。