Safari вертикальный текст смещен

Question

В Safari 13.0.5 вертикальный японский текст не помещается в ограничивающий прямоугольник. Я считаю, что это связано с шрифтом, который я использую (M PLUS 1p), так как тот, который без шрифта будет выглядеть правильно в Safari, , но шрифт, который я хочу использовать, выглядит правильно в Firefox и Chrome. Есть ли что-то, чего мне не хватает, что позволило бы мне исправить это?

Вот пример; .good всегда будет выглядеть хорошо, но .bad будет выглядеть плохо только в Safari (он все равно будет хорошо смотреться в Chrome и Firefox).

@import url(https://fonts.googleapis.com/css?family=M+PLUS+1p:400,700&display=swap&subset=japanese);

.header {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 1em 4em;
}

.good {
  position: absolute;
  right: 0;
  top: 0;
}

.bad {
  font-family: Work Sans, M PLUS\ 1p, system-ui, sans-serif;
  left: 0;
  position: absolute;
  top: 0;
}

.nav {
  box-sizing: border-box;
  display: block;
  writing-mode: vertical-rl;
  white-space: nowrap;
}

.nav-link {
  border-left: 2px solid transparent;
  color: #333;
  margin-top: 1em;
  text-decoration: none;
  white-space: nowrap;
}

.nav-link:hover {
  background-color: #aaa;
  border-left-color: #333;
}

<div class="site">
  <header class="header good">
    <nav class="nav">
      <a href="#" class="nav-link">トップ</a>
      <a href="#" class="nav-link">お問い合わせ</a>
    </nav>
  </header>

  <header class="header bad">
    <nav class="nav">
      <a href="#" class="nav-link">トップ</a>
      <a href="#" class="nav-link">お問い合わせ</a>
    </nav>
  </header>
</div>

Вот скриншоты, демонстрирующие разницу (слева - Safari, плохо; справа - Chrome, хорошо):