postion:fixedを利用してのスマホ表示(safari)について

【行いたい事】
ボタンを押すと右から出てくる画面の中にあるinput:textをfixedのように固定した状態でスマホでも表示させたい

【困っている事】
PCでサイトを開いた際は、問題なくinput:textが表示される。
だがsafariで開いた場合に、最初表示されずに後ろの画面をスクロールする等の行為を行うと表示される動作に悩んでいます。

html
1<div id="glossary2">
2  <button id="glossary_button2" class="glossary_button2"><p class="p_glossary2">用語検索</p></button>
3            
4            <!-- この下に内容を書く bootstrap5.0使用してます -->
5            <div class="list" id="list">
6                <table class="table border border-dark" id="gameTable">
7                    <tr>
8                        <th scope="col">用語</th>
9                        <th scope="col">意味</th>
10                    </tr>
11                </table>
12
13                <form onsubmit="return false;" autocomplete="off">
14                    <div class="term_search">
15                        <input type="text" id="term_search" placeholder="検索ワードを入力">←が表示されない
16                    </div>
17                </form>
18            </div>
19        </div>

CSS
1.glossary_button2{
2    position: fixed;
3    bottom: 5%; 
4    left: 5%;
5    padding: 6px 40px;
6    border-radius: 20px;
7    width: 50px;
8    height: 50px;
9    background: pink;
10    cursor: pointer;
11    z-index: 100;
12  }
13  .p_glossary2{
14    margin-top: 5px;
15    margin-left: -30px;
16    font-size: 100%;
17    white-space: nowrap;
18  }
19
20.term_search{
21  position: fixed;
22  top: 78%;
23  margin-left: 150px;
24}
25
26@media (max-width:1200px) {
27.term_search{ margin-left: 60px; }
28}
29@media (max-width:600px) {
30.term_search{ margin-left: 10px; }
31}

js
1window.addEventListener("load", function () {
2    let glossary2 = document.getElementById('glossary2');
3    let glossary_button2 = document.getElementById('glossary_button2');
4
5    glossary_button2.addEventListener('click', function () {
6        glossary2.classList.toggle('open');
7    });
8});