iOS 15 の Safari でツールバーを非表示にしないと検索ページで検索ができない

[hmatsu47]

起こっている問題 / The Problem

• タイトルのとおりの現象
• スマホだと検索結果の検索窓がはみ出す #71 対応後、iOS Chrome での検索はできるようになったが、Safari ではツールバー（ブラウザ検索・URL 入力）が表示されていると検索バーに 1 文字入力するごとにソフトウェアキーボードが画面から消えるので日本語入力（漢字変換）ができない
• トップページの検索は問題なし

スクリーンショット / Screenshot

• ↑で「ツールバーを非表示」にしないと、検索窓に 1 文字入力するごとにソフトウェアキーボードが引っ込んでしまい、日本語の入力ができない

期待する見せ方・挙動 / Expected Behavior

• ツールバーが表示されていても検索できるようにする

起こっている問題の再現手段 / Steps to Reproduce

1. トップページで何らかのキーワードを入れて検索
2. 検索画面に遷移したら検索窓の検索キーワードを消す
3. 検索窓に何か入力する

動作環境・ブラウザ / Environment

• iOS 15
• Safari

[hmatsu47]

おそらく、

---
title: "全てのカテゴリから検索"
draft: false
---
<input id = "query" onkeyup="search(this.value)" style="width: 90%;" autocomplete="off" autofocus placeholder="検索キーワードを入れてください" />

<script>
    // 検索
    function search(query) {
        $(".card").each(function(i, elem) {
            var question = $(elem).find("span").text().toLowerCase();
            var answer = $(elem).find(".card-body").text().toLowerCase();
            if (query == "" || (question.indexOf(query) == -1 && answer.indexOf(query) == -1)) {
                $(elem).css("display", "none");
            } else {
                $(elem).css("display", "block");
            }
        })
    }
    // ハッシュフラグメントの値で検索を実行
    function searchWithHash() {
        const hash = decodeURI(location.hash.substring(1));
        search(hash);
        // 必要があれば input 要素の値を更新
        const queryElem = document.getElementById('query');
        if (queryElem.value !== hash) {
        queryElem.value = hash;
        }
    }
    // ハッシュフラグメント付きの URL でページを開いたときに検索
    window.addEventListener('DOMContentLoaded', searchWithHash);
    // ページ表示後にハッシュフラグメントが変化したら検索
    // window.addEventListener('hashchange', searchWithHash);
</script>

{{< result >}}

みたいに変えれば URL が動的に変わらないので検索できるようになりそうですが、その一方で検索語句（ハッシュフラグメント）付き URL の共有ができなくなるのが難点です。