[html, css] contenteditable内の要素が削除されてしまう

Question

現象の説明

macOSのsafariでこの現象が発生しています。
contenteditable要素の中で以下の条件が揃うと自動でタグが外されてしまいます。

• ユーザが改行するなどして新しく生成された要素
• position:relative;が指定されている
• 日本語を入力する

デモを用意したのでsafariからアクセスして試してみてください。
https://codepen.io/KimTom/pen/poJNzqp
改行して日本語を入力するとボーダーが消えます。
開発者ツールを見るとdivタグが外されて中のテキストのみになっているのがわかると思います。

※FiroProchainezo様からiPhoneのsafariでは再現しないとの情報をいただきました。

知りたいこと

position:relative;を維持したまま、タグが外されるのを防ぐ方法をご教示いただければありがたいです。

Comments

[FiroProchainezo]

情報提供です。

iphone(システムバージョン13.3.1)のsafariで「改行->日本語入力」としても、赤線側も青線側もボーダーが消える現象は再現しませんでした。
MACとかiPadとかの話なんでしょうか？

[KimTom]

情報提供大変感謝です！
MacBookProのsafariでこの現象が発生しているのですが、iPhoneからは未確認でした。
macOSのsafariだけの現象かもしれません。（となるとsafariの仕様、というよりはバグの可能性が高そうですが…）

質問内容に追記します。ありがとうございます。

Answer 1

手元のMacbookとiPhoneで再現しました。
行頭で何も文字が入っていない場合に日本語入力すると発生する問題のようなので、
いっそ改行時にゼロ幅スペースを埋めておく、とかはどうでしょうか。

const el = document.querySelector('.pos-rel')

el.addEventListener("keyup", event => {
  if (event.keyCode === 13) {
    document.execCommand('insertText', false, '\u200B')
  }
});

CodePen

ゼロ幅スペースは画面には見えませんが文字ではあるので、どこかのタイミングで削除する必要はあるかと思います。
また、挿入されたゼロ幅スペースを削除したあとで日本語入力されてしまうと同様の事象は発生してしまいます。

ContentEditable自体ブラウザで動作が違ったり、変な挙動が多くて広く使われてない感があるので、ある程度泥臭い対応になりそうかなとは思います。

Comments

[KimTom]

回答ありがとうございます！
行頭に文字が入っていると現象が起きない、という点は見逃していました。
「divの中身がbrタグのみであればゼロ幅スペース追加、テキストノードがあれば削除」という感じの処理で実装してみます。感謝です！