Skip to content

[bug] PWA standalone 內容頁返回列被狀態列遮蔽(未吃 safe-area-inset-top) #601

Description

@s123104

摘要

使用者於 staging PWA(standalone 安裝後)實機回報:FAQ/關於/使用指南等 6 個內容頁共用的 sticky 返回麵包屑列被 iOS 狀態列蓋住,無法點擊返回。換算器主畫面 safe-area 正常,不受影響。

背景/證據(使用者實測根因報告)

  • 該返回列為內容頁共用 sticky 麵包屑(PageNavHeader,由 ContentPageLayout 統一掛載),寫 sticky top-0 但 padding-top 只有固定 10px(py-2.5),沒吃 env(safe-area-inset-top)
  • PWA 開啟 viewport-fit=coverblack-translucent 狀態列 → standalone 下該列頂進瀏海區被狀態列覆蓋。
  • 使用者實測:套用專案既有 .pt-safe-top 後往下移 59px,完全脫離狀態列。

影響

  • 影響全部走 ContentPageLayout 的內容頁(FAQ/使用指南/關於/隱私權/開放資料/SEO 技術等 6 頁)。
  • standalone 使用者在這些頁面無法使用返回/麵包屑導覽,屬導覽阻斷級(P1)。

範圍

  • 只修本主因(sticky 返回列 safe-area)。使用者另回報 staging manifest 跨網域、字體 preload 未用到兩項小發現,由 PM 另案追蹤,不在本 issue 範圍。

驗收標準

  1. standalone(safe-area-inset-top > 0)下返回列完整顯示於狀態列下方,可點擊。
  2. 非 standalone(inset = 0)視覺不變(padding-top 維持 10px)。
  3. sticky 底色延伸涵蓋 inset 區,滾動時內容不會裸露穿過瀏海下方。
  4. 單元測試斷言該列 class 含 safe-area 適配;6 個內容頁 smoke 斷言通過。

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingseverity:p1High-priority work

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions