Safari bug with incorrect keyboard tabbing

Using desktop safari v10.0.1 on OSX 10.11.6

by pete_b

HTML

<fieldset>
<legend>With space after <code>&lt;/use&gt;</code></legend>
<form class="" action="index.html" method="post">
<input type="text" name="" value=""><br>
<button type="button">
<svg><use xlink:href="#icon-check"></use>
</svg> Focus me
</button><br>
<input type="text" name="" value=""><br>
<button type="submit" name="button">Submit</button>
</form>
</fieldset>

<br>
<br>

<fieldset>
<legend>No space after <code>&lt;/use&gt;</code> <span style="color: red;">Safari 10.0.1 Cannot tab past the button with inline-svg <code>&lt;use&gt;</code> element</span></legend>
<form class="" action="index.html" method="post">
<input type="text" name="" value=""><br>
<button type="button">
<svg><use xlink:href="#icon-check"></use></svg> Focus me
</button><br>
<input type="text" name="" value=""><br>
<button type="submit" name="button">Submit</button>
</form>
</fieldset>

<svg style="position:absolute;width:1px;height:1px;overflow:hidden" xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol id="icon-check" viewBox="0 0 1024 1024">
    <path d="M864 128L384 608 160 384 0 544l384 384 640-640z"/>
  </symbol>
</svg>

CSS

body {
    font: 1em sans-serif;
}
svg {
    width: 1em;
    height: 1em;
}