

[teratailにも同様の質問](https://teratail.com/questions/242718)
をしましたが回答が得られなかったためこちらに質問させていただきます。  
どなたかわかる方、教えていただけると嬉しいです。

* * *

## 現象の説明

**safariのみで起こる現象** です。  
`contenteditable`要素の中で以下の条件が揃うと自動でタグが外されてしまいます。

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

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

* * *

## 知りたいこと

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


CC BY-SA 4.0
2020-02-28T07:18:46.140
63430
2021-12-26T11:16:54.593
2020-02-28T07:21:31.330
3060
38002
question
javascript html css safari
safari で contenteditable 内の要素が削除されてしまう


質問文に載っている teratail の [Eggpan
さんの回答](https://teratail.com/questions/242718#reply-355773)によって、この質問は解決しています。その回答では、改行する際にゼロ幅スペースを挿入し、後々ゼロ幅スペースを削除する、といった方針で問題を解決しているようです[[1]](https://teratail.com/questions/242718#reply-355773)。

> ## [html, css]
> contenteditable内の要素が削除されてしまう[[1]](https://teratail.com/questions/242718#reply-355773)
>
> 行頭で何も文字が入っていない場合に日本語入力すると発生する問題のようなので、  
>  いっそ改行時にゼロ幅スペースを埋めておく、とかはどうでしょうか。
[code]

>     const el = document.querySelector('.pos-rel')
>  
>     el.addEventListener("keyup", event => {
>       if (event.keyCode === 13) {
>         document.execCommand('insertText', false, '\u200B')
>       }
>     });
>  
[/code]

>
> [CodePen](https://codepen.io/eggpan/pen/MWwEdKG)
>
> ゼロ幅スペースは画面には見えませんが文字ではあるので、どこかのタイミングで削除する必要はあるかと思います。  
>  また、挿入されたゼロ幅スペースを削除したあとで日本語入力されてしまうと同様の事象は発生してしまいます。
>
> ContentEditable自体ブラウザで動作が違ったり、変な挙動が多くて広く使われてない感があるので、ある程度泥臭い対応になりそうかなとは思います。


CC BY-SA 4.0
2021-12-26T11:16:54.593
85338
2021-12-26T11:16:54.593
32986
63430
answer