Safari で contentedittable 付きの ul/ol 要素内の li 要素が削除される

contentedittable を付与すると、div 要素であっても input のように要素の変更ができるようになります。zenn のエディタのような画面を作る際によく使われるんですが、Safari の挙動であれ？っと思ったことがありました。

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable

Safari の挙動

下記のように li の中身を contenteditale で変更できるようにした際に、CSS で postion relative を当てると、li 要素が削除されてしまいました... (Safari のバージョンは 17.5)

↓ コードのイメージ

# HTML
<ul contenteditable="true">
  <li></li>
</ul>

# css
li {
  position: relative;
}

codepen で再現できるか試してみました。
https://codepen.io/Bunta/pen/jOjYRWy

"テスト" と入力をすると <ul><li>テスト</li></ul> という構造ではなく、<ul>テスト</ul> という構造になってしまいます。

ちなみに、"test" だとこの問題が発生しなかったです。

対応

postion relative は諦めて transform: translate(0); を使って対応しました。もちろんデザインによって対応は変わると思うのですが、シンプルに position relative は使わないしかなさそうです。