Skip to content

Bug:iOS PWA(standalone)设置/Provider 弹窗标题栏与系统状态栏重叠,页签无法点击(0.8.10,附已验证修复) #603

Description

@nannant666

环境

现象

PWA 中打开 设置(模型/技能/常规等)或 Provider/API Key 配置弹窗,弹窗标题栏顶进系统状态栏,与时钟/灵动岛重叠,页签无法点击。关闭重装 PWA 均复现。

根因(两层,缺一不可)

#547 让页面画布延伸到状态栏底下,主界面头部已用 env(safe-area-inset-top) 避让,但弹窗遮罩没有,且单独补 padding 也不够:

  1. 遮罩无安全区避让.settings-dialog-backdrop.config-panel-root.is-modal 都是 position: fixed; inset: 0 垂直居中,无任何 env(safe-area-inset-*)。standalone 下 WebKit 的 dvh 不含状态栏条而画布从屏幕顶开始(fix: fill the iOS standalone PWA viewport #547 注释记录的同一怪癖),居中后弹窗头部正好落在状态栏区域。
  2. 只加 padding 会被弹窗高度吃回去(真机实测):.settings-dialog-surfaceheight: 84vh 里 standalone 的 vh 状态栏条(偏大),会重新顶进状态栏;surface 必须同时限制在留白后的内容区内。
  3. env() 兜底:真机上 viewport-fit=cover 已确认在 meta 中,但 env(safe-area-inset-top) 仍疑似返回 0,因此用 max(59px, env(...)) 硬兜底(59px ≈ 灵动岛机型状态栏高度)。

已验证修复(iPhone PWA 实测通过)

@media (display-mode: standalone) {
  .settings-dialog-backdrop,
  .config-panel-root.is-modal {
    padding-top: max(59px, env(safe-area-inset-top));
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }
  .settings-dialog-surface,
  .config-panel-root.is-modal > .config-panel-surface {
    max-height: 100%;
  }
}

修复 PR 随后附上(含测试)。此前分散在 #602 的讨论已并入本 issue。

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

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions