SwiftUIでTextEditorにApple Pencilで手書き入力（Scribble）を使うとTextEditorの位置がズレる問題をなんとかした、の巻

2026.04.05
iOS
iOS, SwiftUI

1. はじめに
2. 起きていたこと
3. 原因っぽいやつ
4. ハマりポイント
5. 解決方法
6. コードの説明
7. 結果
8. まとめ
9. おわりに

はじめに

最近、iOSアプリを作っていまして。
SwiftUIでTextEditorにてテキスト入力ができる機能をもつアプリを作っています。

TextEditorは画面の下部に配置しています。

んで、iPadでTextFieldやTextEditorを使うと、Apple PencilのScribbleでそのまま入力できるのですが、

それを試していたときに、ちょっとおかしな挙動に遭遇しました。

Apple Pencilで手書き入力を開始すると、TextEditorの位置が動いてしまって、Apple Pencilで入力開始した位置とズレる。

指でタップしてソフトウェアキーボードを出す場合はTextEditorはきちんとせり上がって位置が調整され問題はない。

気持ち悪いので、原因を探りつつ対処してみた話です。

起きていたこと

現象としてはこんな感じです。

SwiftUIで作った、画面下部に配置したTextField / TextEditor
Apple Pencilで手書き入力を開始
Scribble用のパレットが表示される
すると
View全体のレイアウトが微妙に変わる
で、
TextField / TextEditorの表示位置が入力位置からズレる
一通りズレて再描画が完了したら、ズレずに入力できるようになる

という状態です。こんな感じ。
ちょっと見にくいですが、TextEditorの枠が入力開始位置からずれています。

原因っぽいやつ

内部の仕様を完全に追えているわけではないですが、挙動から考えるとこうなっています。

Scribbleの場合も、Scribbleのパレットが表示される時に、キーボード表示のときと同様にsafeAreaが変化して、TextEditorの位置を調整する

しかし、

Apple Pencilで入力を開始したタイミングでレイアウトが変わってしまうため、結果的に書いている最中に、ペンの先を置いている位置とTextEditorの表示位置にズレが生じる

ハマりポイント

最初は素直にこういう対応を試しました。

.ignoresSafeArea(.keyboard)

これは効いて、Scribble用のパレットが表示されても、TextEditorの位置が固定されるようになりました。

ただし問題があって、

指でタップしてソフトウェアキーボードを表示した場合、
TextEditorのViewが押し上げされなくなり、キーボードの下に埋もれてしまうようになる

どちらかを立てると、どちらかが崩れる　っていう、なんとも歯痒い展開になってしまったので、色々試すことになりました。

解決方法

で、最終的に落ち着いたのがこの形

let isPad = UIDevice.current.userInterfaceIdiom == .pad

GeometryReader { geometry in
    ZStack {
        TextEditor
    }
    .padding(.bottom, isPad ? (geometry.safeAreaInsets.bottom < 100 ? 60 : geometry.safeAreaInsets.bottom) : 0)
    .ignoresSafeArea(.keyboard, edges: isPad ? .bottom : [])
}

コードの説明

① safeAreaを自前で制御

geometry.safeAreaInsets.bottom < 100 ? 60 : geometry.safeAreaInsets.bottom

Apple Pencil用のパレットと、キーボードでSafeAreaの大きさを切り分ける。
100という数字はiPadでのキーボードの高さが300px程度で、Apple Pencilのパレットは60px程度なので、ざっくりした閾値として使っています。

② iPad限定にする

isPad

Scribbleを使うiPadのみで適用

👉 不要な影響を防ぐ

③ keyboard無視は併用する

.ignoresSafeArea(.keyboard)

SafeAreaの自動調整を無視して自前で制御

結果

キーボード入力 → 問題なし
Apple Pencil（Scribble） → 問題なし
入力位置のズレ → 解消

TextEditorの枠がずれずにそのまま入力できています。見づらくてすみません。。。

まとめ

今回の挙動をまとめると、

SwiftUIで作った、画面下部に配置したTextField / TextEditor
Apple Pencilで手書き入力(Scribble)しようとすると、パレットが表示されるためにTextField / TextEditorの位置が修正される
結果として、Apple Pencilのペン先が接地している位置と、TextField / TextEditorがズレる

、と。

対策としては、

safeAreaを自前で補正する

という形になりました。

おわりに

今回は、ScribbleでTextEditorを使ったらTextEditorの表示位置がズレて困ったけど、なんとか対処してみた、という話でした。

もっといい方法もあるのかもしれませんが、もしかしたら誰かの役に立つかもしれないし、未来の自分もたぶんまた忘れるので、そのときのためのメモとして残しておくことにします。

おしまい