Mac Safari 15 doesn't seem to show a default focus state

Does anyone know of existing focus state issues or tab index issues, relating to Mac Safari?

Go to: https://codepen.io/Richard-Stelmach/pen/abRMpyj

Try tabbing through the content in Mac safari, 15.

No focus state is shown.

If you try the same in Chrome, a focus state is shown, and you can tab through the relevant elements on the page.

No focus state has been set in the html, css, as want to use the browser default focus state.

DEMO:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap');

*{
  line-height: calc(1ex / 0.32);
  font-family: 'Atkinson Hyperlegible', sans-serif;
}
@supports (font-size-adjust: 1;) {
    body {
        font-size-adjust: 0.5;
    }
}

.container{
  padding:24px;
}
.dark{
  background:#203240;
  color:white;
}
.dark a{
  color:white;
}
.light{
  background:white;
  color:#203240;
}

fieldset{
  margin-bottom:24px;
}

h1 {
    font-size: 2.5em;
    line-height: calc(1ex / 0.42);
    margin: calc(1ex / 0.42) 0;
}

h2 {
    font-size: 2em;
    line-height: calc(1ex / 0.42);
    margin: calc(1ex / 0.42) 0;
}

h3 {
    font-size: 1.75em;
    line-height: calc(1ex / 0.38);
    margin: calc(1ex / 0.38) 0;
}

h4 {
    font-size: 1.5em;
    line-height: calc(1ex / 0.37);
    margin: calc(1ex / 0.37) 0;
}

p {
    font-size: 1em;
    line-height: calc(1ex / 0.32);
    margin: calc(1ex / 0.32) 0;
}

input{
  font-size:1em;
}

<!-- language: lang-html -->

<div class='light container'>
  <h1>Focus states</h1>
  <h2>Default focus states</h2>
  <p>To help determine how browsers treat the <a href='https://css-tricks.com/copy-the-browsers-native-focus-styles/'>focus states</a> of elements, by default</p>

  <form action="http://www.example.com/cgi/subscribe/" method="post">
    <fieldset>
    <legend>Example radio buttons</legend>
      <div>
        <input type="radio" name="format" id="someRadio" value="Some radio" checked>
        <label for="someRadio">Some radio</label>
      </div>
      <div>
        <input type="radio" name="format" id="anotherRadio" value="Another radio">
        <label for="anotherRadio">Another radio</label>
      </div>
    </fieldset>
    <fieldset>
    <legend>Example checkbox</legend>
      <div>
        <input type="checkbox" name="example checkbox" id="check_1">
        <label for="check_1">Example checkbox</label>
      </div>
    </fieldset>
    <input type="submit" value="Submit" />
  </form>
</div>

<!-- end snippet -->

Try going to Safari / Settings / Advanced and check to see if "Press tab to highlight each item" is checked (or not). If it's not checked, then check that and retest.