iOSブラウザで快適に書けるエディターを作るの大変すぎ問題

iOSのブラウザ（Safari、Chromeなどなど）で体験の良いWYSIWYGエディタを作るのは無理ゲーである。色々と理由はあるが、いちばん辛いのはバーチャルキーボード（オンスクリーンキーボード）を表示したときの挙動だと思っている。

キーボードが表示されているときにposition: fixedが効かない

WYSIWYGエディタではテキストの装飾や画像挿入などのボタンを画面のどこかに固定したくなることが多い。

しかし、iOS Safariではキーボードが表示されているときにposition: fixedなどのCSSだけで画面上に何かを固定させることが難しい。

position: fixedとbottom: 0 やtop: 0を使っても要素が画面に固定されない仕様となっている（これはposition: stickyにしても同じ）。

ワークアラウンドも上手く動かない

noteやscrapboxなどのサービスでは、キーボード表示中にも画面のどこかに要素を固定できるように力技で対応を行っている。具体的には、キーボード表示中にはscroll等に対してイベントリスナを設定し、その都度window等からの距離をその計算し、topやtransformの値をpx単位で調整している。

https://scrapbox.io/shokai/iOS_Safariはスクリーンキーボードを開いているとposition:_fixedがスクロールに付いてこなくなる

（2024年1月追記: より良さそうなワークアラウンドを教えてもらいました）

https://blog.chairoi.me/entry/safari-virtual-keyboard

しかし、これらのワークアラウンドにも難しい問題がある。それはイベントハンドラですぐに位置の再計算を行っても画面に反映されるまでの間にラグがあるという点だ。

こんな感じでスクロールしたときにメニューの位置がずれたり、キーボードが閉じたときにしばらく画面の真ん中らへんにメニューが表示されてしまったりする。

iOS Safariでこの問題にうまく対応できているサービスを自分は見たことがない。他にもiOS Safariならではの辛い問題はあるのだが、特にこの問題だけはワークアラウンドも難しく本当に辛い。

対処法

体験を追求するのであれば現状「スマホでの編集はネイティブアプリで」もしくは「WYSIWYGエディタをやめる」しかないと思う。noteやSubstack、Notionなどの大手はネイティブアプリを提供する余力があるだろうけど、少人数でやってるところは辛いよね…。