iOS(16~18)のテーマカラー設定はメタタグで
iOS(16~) Safariにて、上部ステータスバーを任意の指定カラーに設定する方法として
htmlファイルのメタタグ指定がある。
<meta name="theme-color" content="#F4F4F3">
が、
iOS26~Safariでは基本的に効かない!
-
上記指定によらず、基本bodyのカラー指定に依存する。
この場合、透過に加えてコンテンツ面のカラーと馴染むようよしなにグラデーション処理される。 -
固定headerなど、fixedまたはstickyで上部固定オブジェクトがある場合、
ステータスバーの背景にはそのオブジェクトのカラーが透過せず適用される。
下部のUIアイランド領域も基本bodyカラー依存
これだと、
下部固定のタブメニューUIや、下端ビタビタのCTAの場合に問題が..!
モーダルやメニューパネルで、画面フルカバーを意図してheight: 100vh設定している場合に上下（ステータスバーと下部UIアイランド領域で）コンテンツが見えてしまう現象も同様。
↓
下部UIアイランド領域を透過させない為の解決策
◎ダミーブロックを固定配置すればOK！
- 透過色を指定しても、UIアイランド領域は透過無しの色となる
（opacity:0.001でもOK、opacity:1のベタ色が配色される）
（以下、条件・パターンの検証です）
★必要なサイズと配置：
高さ：
h100pxにて、
bottomを-99px（1pxだけ領域内）だとNG
-95px＞OK
-96px＞OK
-97px＞NG！
↓
◎ミニマム4pxあればOK、と言える。
height:4px・bottom:0
でもOK！
この場合、
ダミーブロックの色ではなく、bodyの色指定が適用される！
横幅：
100%でOKだったところ、
1%＞NG
50%＞OK bodyの色指定が適用
└ （ここで更に検証）bodyの色指定を透過に（ex＞rgba(red,0.5)）すると、
→ 透過した色味となる、が、後ろのコンテンツは透けない！
上部ステータスバーは、同色でコンテンツが透ける。
このパターンを活用したい場面もありそう！だが、一点問題アリ。
表示直後、下部が透過グラデ状態となる。少しでもスクロールすればベタになる。
51%＞OK - bodyカラー
75%＞OK - bodyカラー
77%＞OK - bodyカラー
78%＞OK - bodyカラー
79%＞OK・ダミーブロックの色
80%＞OK・ダミーブロックの色
90%＞OK・ダミーブロックの色
◎bodyカラーならばw50%（極小の1%でもよい）
◎ダミーブロックの色を使うならばw100%（w80%以上）
（更に検証）
コンテンツの操作を邪魔しないよう、奥に配置してもOKか？
z-index: -100＞UIアイランドの配色はOK
だが、表示直後、下部が透過グラデ状態となる問題アリ
z-index: -1＞上記の問題アリ
z-index: 0＞OK
コンテンツに被る面積をなるべく抑え、
色は深い透過でほぼ透明にする時点でUIに支障ないが、
z-indexは0で指定しておく。
色は深い透過 → 色味によって（＆面積によっても）
透過具合の閾値は変動、要調整、
一律「opacity:0.001で可」とは言えない! いや、
濃い色, 0.01＞OK
薄い色, 0.01＞も、OK
↓
1%あれば色味によらず大丈夫そう（＆面積に左右されそう）
まとめ
以上雑多メモにてお恥ずかしいですが同様にお困りの方もいると思い‥
速報的に書きました！お役に立てば幸いです。
デザイン・構造によって閾値や条件が変わり、（...後日追伸予定）//