実現したいこと
以前から稼働していて表示不具合のなかった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>
試したこと・調べたこと
上記の詳細・結果
似たような話題が出ていないかネットを検索したのですがなかなか見つかりませんでした。
おそらく同じ問題を指摘する投稿 https://forums.developer.apple.com/forums/thread/743467 を発見しましたが、replyはついていません。
もともとの問題は稼働しているWebフォームでの不具合だったためCSSの不備を疑い、いくつか縦方向の位置に関係しそうな箇所をいじったりしたのですが一向に改善しませんでした。それで上記のようなサンプルを試したところ問題が再現してしまったため、iOS17.xのWebブラウザ Safari・Chrome に共通する根本的な問題かと捉えています。
CSSリセットも試しましたが不具合は変わりませんでした。
補足
特になし
0 コメント