CTAバー。画面の下にぴったり張り付く「電話で相談」「Web相談」みたいなやつ。

これを実装していて、普通は position: fixed + bottom: 0 たったこれだけで終わるんですが、 iOS Safari で見たら、ボタンの下部分の領域の背景が透けて見えててしまっていた（↑の図の状態）。 参考にしてた別のサイトはきれいに表示されてるので絶対できるはずなのに、うちだけ透ける。なんで。

…で、ここからコストかけて Opus 4.6 に修正させまくったが、全然治らないやり取りが続くことになった。

最初はがむしゃらに修正依頼

AIに「治ってないんだが」と言いまくって、めっちゃ色々と対応させた。 visualViewport API で動的に bottom を補正したり、キーボード表示時の非表示とか、ズーム検知とか、 requestAnimationFrame でスロットリングとか、やたら本格的なやつ。 ただ、結果何も変わらなかった。

1時間くらいかけて、かなり色々修正させたけど、何やっても効かない、治らない。

途中で参考サイトのCSSを確認したりもした。そこだと position: fixed で bottom: 0 で background-color: #fff してるだけ。以上。何も特別なことしてない。 viewport-fit: cover すら使ってない。じゃあなんでうちだけ透けるの？って話で、bodyの背景が白だから目立たないだけなんじゃないかとか、 overflow-x の有無が root scroller の挙動を変えてるんじゃないかとか、賢いモデルのAIに聞いたら

html/bodyのoverflow-xがiOS Safariのroot scroller描画を不安定化している

とか言い出して、もうそういう次元の話なのかと。本当に？ こんな単純な実装なのに全然解決できないのが不思議でしょうがなかった。

いきなり解決

さらに続けて色々調査・修正させたが、それでも治らなかった。でも、ここで一点気になる点が見つかった。 「これ production ビルドじゃないからか？画面にAstroの検証ツールみたいなの浮いてるな…」と。

いつも確認する際は npm run dev でページを表示していたが、Astro （自分が作ってるサイトで採用してる）の開発サーバーって画面下に Dev Toolbar を表示するみたいで、それが原因だったっぽい。 試しに npm run preview で本番ビルドで動作させたところ、今までの試行錯誤が嘘だったみたいに問題なく背景がついてきた。

（ちょっとわかりにくいですが、CTAバーの下部分が背景色で塗りつぶされてるようになっています）

どうやらこの Dev Toolvar が iOS Safari のビューポートとか fixed 要素の描画に影響してたっぽい。つまり最初から本番ビルドでは問題なかったと思われる。

教訓としては、 iOS Safari で表示確認するときは本番ビルドで見ろ、ということ。ただ、開発中にdevサーバーで確認するのは当たり前の行動だし、そこに Dev Toolbar が出てること自体あまり気にしていなかった。 こういう「原因の切り分けミス」って技術力とか関係なくて、ただ単に確認手順や知識不足の問題なんですよね。 今回で言えば「 dev サーバーの Dev Toolbar が iOS 表示に影響する」っていう前提知識がなかったのが全てで、そこさえ知ってれば最初の5分で終わってた。

ただまぁ、いい勉強になりました。