【Safari】word-breakとline-breakを同時に使うと表示崩れがおきる

次のようなグロナビをマークアップしている

このとき、ある理由でこのグロナビに対してword-break: break-allとline-break: anywhereのスタイルをあてたら

Safariのみ次のように表示崩れがおこった

幅が狭くなりsvgをposition: absoluteで右寄せにしているのが効かなくなって折り返している

Safariのみで起こる事象で、なんでこんなことになるかはわかっていないが

word-break: break-allとline-break: anywhereを同時にあてるとこうなってしまう

実装は以下のような感じ

<style>
  .wrap {
      margin-top: 120px;
      word-break: break-all;
      color: #495361;
      line-break: anywhere;
  }
  .globalNav {
      display: flex;
      width: 980px;
      margin: auto;
      border: 1px solid;
  }
  .item {
     padding: 0 30px 0 15px;
     position: relative;
     border-right: 1px solid;
  }
  .icon {
    width: 5px;
    height: 8px;
    top: 50%;
    right: 15px;
    transform: translateY(-50%) rotate(90deg);
    position: absolute;
    fill: #4b9dff;
  }
</style>

<div class="wrap">
    <div class="globalNav">
        <div class="item">色から探す
            <svg class="icon">
                <use xlink:href="#icon_chevron"></use>
            </svg>
        </div>
        ...
    </div>
</div>

とりあえずChromeでテストをしていると気づかないので注意が必要