ios-safari-box-shadow-circle-bug-repro.html

<title>iOS Safari bug: incorrect rendering of box-shadow on 19.2px square element with 50% border-radius</title>

<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, width=device-width">

<style>
  html {
    font-size: 16px;
  }

  .circle-bug {
    height: 1.2em;
    width: 1.2em;
    box-shadow: inset 0 0 0 1px red;
    border-radius: 50%;
  }

  .circle-ok {
    height: 19px;
    width: 19px;
    box-shadow: inset 0 0 0 1px green;
    border-radius: 50%;
  }
</style>

<p>This should render as a red circle, but in iOS Safari, it doesn’t (as of June 1, 2020):</p>
<div class="circle-bug"></div>

<br>

<p>This renders correctly as a green circle in all modern browsers (as of June 1, 2020):</p>
<div class="circle-ok"></div>

Demo →