iOS17.xのWebブラウザで発生する<input type="text">への文字入力時のレイアウトへの影響を止めたい

実現したいこと

以前から稼働していて表示不具合のなかったWebフォームで、<input type="text">へ文字入力したときに<input>とその前後のインライン要素の相対的な位置が変化してしまう、という不思議な現象に遭遇しました。この現象を確認したのはiOS17.xのiPad, iPhoneのWebブラウザだけです。
この現象を抑止したいと思います。

発生している問題・分からないこと

iOS17.xのiPad・iPhoneのWebブラウザ(Safari・Chrome)で、<input type="text">へ文字入力をするとき、

フォームを表示して初めてそのinputへ入力するときは問題ないが
最初の入力を消して再度入力すると、相対的に<input>が上、前後の要素が下に移動し
入力を削除すると、移動したように見えた状態から初期状態へ戻る

というような現象が起きました。

どの要素に影響しているのか調べるため、iPhoneをMacBook Airに接続しSafariのインスペクタで観察しましたが、その挙動時にサイズが変化する要素を発見することはできませんでした。

検討のためHTMLサンプルを作りました。
下記HTMLで、どの<input>でも繰り返し文字を入力して消すたびに<input>とその前の数字の位置関係が変化するのを見ることができます。

エラーメッセージ

error
1# iPhoneで下記HTMLを試すのにあたり、MacBook Airに接続してインスペクタで観察しましたが、その範囲では<input>そのものや周りの要素のサイズ(「計算済み」の数値)には変化がありませんでした。
2# その他にインスペクタで警告などは見受けられませんでした。

該当のソースコード

HTML
1<html>
2<body>
3
41 <input type="text">
5
6<dl>
7<dd>
82 <input type="text">
9</dd>
10</dl>
11
12<table>
13<tr>
14<td>
153 <input type="text">
16</td>
17</tr>
18</table>
19
20</body>
21</html>

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

似たような話題が出ていないかネットを検索したのですがなかなか見つかりませんでした。
おそらく同じ問題を指摘する投稿 https://forums.developer.apple.com/forums/thread/743467 を発見しましたが、replyはついていません。

もともとの問題は稼働しているWebフォームでの不具合だったためCSSの不備を疑い、いくつか縦方向の位置に関係しそうな箇所をいじったりしたのですが一向に改善しませんでした。それで上記のようなサンプルを試したところ問題が再現してしまったため、iOS17.xのWebブラウザ Safari・Chrome に共通する根本的な問題かと捉えています。
CSSリセットも試しましたが不具合は変わりませんでした。

補足

特になし

Lhankor_Mhy

2024/02/06 05:22

興味深いですね。ベースラインの問題でしょうか。 vertical-align などはお試しになられましたか？

int32_t

2024/02/06 05:48

ASCIIの文字を入力した場合とかな漢字を入力した場合で現象が異なりますか？

sfl

2024/02/06 05:57

コメントありがとうございます。 <input>にvertical-alignを指定したところ、baseline以外では<input>を固定することができました！以下、3行目以降はinputへの入力・削除に関わらずその位置が固定されます。 ``` 1 <input type="text"> 1<br> 2 <input type="text" style="vertical-align:baseline;"> 2<br> 3 <input type="text" style="vertical-align:top;"> 3<br> 4 <input type="text" style="vertical-align:middle;"> 4<br> 5 <input type="text" style="vertical-align:bottom;"> 5<br> 6 <input type="text" style="vertical-align:text-top;"> 6<br> 7 <input type="text" style="vertical-align:text-bottom;"> 7<br> ```

sfl

2024/02/06 06:04

やはりインスペクタではstyle中の変化する要素を発見できませんでした。また、SafariだけでなくChromeでも上の3行目以降("vertical-align:top;")はinputの高さが固定されることを確認しました。 OSとブラウザの関係について知識がないのですが、こうしたデフォルトのスタイルはOSが持っているものなのでしょうか? SafariとChromeが同じ挙動をするというのが意外でした。

sfl

2024/02/06 06:09

なお、inputへ入力される文字については、ASCII文字でも、かな漢字でも挙動に変わりはありません。

Lhankor_Mhy

2024/02/06 06:19

なるほど、やはりベースラインが変動してそうですね。おそらく、スロットが空文字になった時にベースラインがなくなってしまうので、何らかの処理を内部的にしているのでしょうけれど、そこにバグがあるのかもしれません。いずれにせよこちらにできることは少なそうです。試せる環境が手元にないので推測になってしまいますが、vertical-align でベースライン以外にそろえるか、もしかすると descent-override でディセンダーをつぶしてしまうのもいいのかもしれないですね。 https://developer.mozilla.org/ja/docs/Web/CSS/@font-face/descent-override

Lhankor_Mhy

2024/02/06 06:21

なお、iOSのブラウザは内部的にはすべてSafariです。アップルの意向で他のブラウザはガワを変えることだけが許可されています。

sfl

2024/02/06 06:42

descent-overrideの指定を試しましたが、値に何を与えてもinputの高さは固定されませんでした。 >スロットが空文字になった時にベースラインがなくなってしまうので、何らかの処理を内部的にしているのでしょうけれど、そこにバグがあるのかもなるほど、多分そういうことなんですね。バグに付き合うのは歓迎ではありませんが、vertical-alignで明示的にinputの高さを示すのは悪いことではないのでそうしたいと思います。

sfl

2024/02/06 06:48

ChromeでもエンジンはSafariそのままなんですか…まぁAppleらしい戦略ですね。ご教示ありがとうございます。

sfl

2024/02/06 06:51

Lhankor_Mhyさん、詳細なご意見ありがとうございました。ベストアンサーは回答をいただいたint32_tさんへ送りますが早期に有用な情報をくださったLhankor_Mhyさんには特に感謝いたします。ありがとうございました。