問題
PWAを用いたアプリ開発でiOSだけinput[type=text]のテキストボックスをタップしてもキーボードが表示されないという問題がいきなり生じた。
結論
まず結論から申し上げますと再起動したら直りました。
原因がなんだったのかよくわかりませんでした...
何かこれに関して知っている方がいらっしゃればコメント下されると助かります。
環境
iOSバージョン: 18.1.1
manifest.json
manifest.json
{
"name": "xxx",
"short_name": "xxx",
"background_color": "#ffffff",
"icons": [{
"src": "https://xxx/icon.png",
"sizes": "256x256",
"type": "image/png"
}],
"start_url": "./",
"scope": "./",
"display": "standalone"
}
試したこと
viewportの設定が悪いのか、CSSとiOSのPWAとは互換性がないのか？といろいろ疑って数時間ほど経って解決せず、結局1日目は何も解決できず、2日目も同様にいろいろ試行錯誤したがダメだった。
AndroidやWindowsではPWAは正常に動作し、iOSのSafari、Chromeでも直接ブラウザならば正しく動作した。
なのにiOSでPWAとしてインストールしたときだけ使えなかった。
しかし開発した初級段階ではそんなことは起こらなかったのだ。
そして長時間CSSやJavaScriptをいろいろと見直してみたが、何も解決に至らず最終的にhtml単体で
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="manifest" href="./manifest.json">
<link rel="icon" href="./icon.png" sizes="32x32">
<link rel="icon" href="./icon.png" sizes="192x192">
<link rel="apple-touch-icon" href="./icon.png">
<link rel="mask-icon" href="./icon.png" color="#ffffff">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="theme-color" content="#ffffff">
</head>
<body>
<input type="text" name="test" />
</body>
</html>
と上記のみを試しにPWAにしてみたが、おや？
まったく動作しなかった。
もう何がなんだかわからなくなったのでとりあえずiPhoneを再起動して動作確認したところキーボードが表示された！
最後に
原因不明なバグに遭遇したらとりま再起動しろ！ ということなのかもしれない。
ほんとになんのバグなのかもわからなかったが、ひとまず解決してよかった。今のところは安定してます。