Skip to content

iPhone でステータスバーの下のヘッダーがにじむのを直す - #8

Merged
ktkwmr merged 1 commit into
mainfrom
claude/pensive-cray-11na97
Oct 29, 2026
Merged

ktkwmr merged 1 commit into
mainfrom
claude/pensive-cray-11na97

Conversation

@ktkwmr

@ktkwmr ktkwmr commented Oct 29, 2026

Copy link
Copy Markdown
Owner

iOS 26 の Safari とホーム画面のアプリは、ステータスバーの下をぼかす。上端に画面幅いっぱいの sticky で不透明な背景の要素があれば、その色を使う(BandStemMixer と同じ対応、ベースライン 9-12)。

  • .topbar を sticky(top: 0、白の背景、z-index: 900)に
  • 情報ページ・記事ページのヘッダー(layout.mjs)にステータスバーの分の余白(safe-area-inset-top)を足し、生成ページを作り直した

確認: Playwright(390px 幅)でスクロールしてもヘッダーが上端に残る。node --test tests/analysis.test.mjs・node tests/e2e.mjs ともに通過。iPhone 実機は未確認。


Generated by Claude Code

iOS 26 の Safari とホーム画面のアプリは、ステータスバーの下をぼかす。ページの
上端に画面幅いっぱいの fixed / sticky で背景色のある要素があれば、ぼかしの
代わりにその色を使う。ヘッダーを sticky(top: 0、白の不透明な背景)にした。
情報ページのヘッダー(もともと sticky)には、ステータスバーの分の余白
(safe-area-inset-top)を足した(BandStemMixer と同じ対応)。

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01FBcjAgSL8LtkCgK3xDDgSy
@ktkwmr
ktkwmr merged commit 5086551 into main Oct 29, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants