text-align:center + word-spacing not working in Safari

Question

I have two elements of words which should be on the same line and separated by char/image ONLY when they are on the same line. The text must be centered.

My current solution works on all browsers but Safari, because Safari does't correctly center the text if there's a word-spacing set.

Example of the problem: https://jsfiddle.net/k275f1ph/

HTML:

<ul class="test">
  <li><span>Longer Word 1</span></li>
  <li><span>Word 2</span></li>
</ul>
<br/>
<ul>
  <li><span>Longer Word 1</span></li>
  <li><span>Word 2</span></li>
</ul>

CSS:

ul {
  display: block;
  width: 120px;
  border: 1px solid black;
  margin: 0;
  padding: 0;
  text-align: center;
  word-spacing: 10px;
}

ul.test {
  width: 300px;
}

li {
  display: inline;
  word-spacing: 0;
  position: relative;
  &:not(:last-child):after {
    content: " ";
    position: relative;
    background-image: url("https://static01.20min.ch/dyim/5dd8a8/T470,230/images/content/2/7/1/27109470/10/teaserbreit.jpg");
    width: 6px;
    height: 6px;
    word-spacing: 20px;
  }
}

span {
  display: inline-block;
}

As you can see, the text is not centered on the upper element only in Safari.

How to solve this?