Skip to content

fix: keep modal dialogs clear of the iOS status bar in standalone mode - #604

Merged
agegr merged 2 commits into
agegr:mainfrom
nannant666:fix/ios-standalone-dialog-safe-area
Aug 26, 2026
Merged

fix: keep modal dialogs clear of the iOS status bar in standalone mode#604
agegr merged 2 commits into
agegr:mainfrom
nannant666:fix/ios-standalone-dialog-safe-area

Conversation

@nannant666

Copy link
Copy Markdown
Contributor

Fixes #603

问题

0.8.10 起(#547 全屏铺满后),iOS PWA(standalone)中打开设置弹窗(.settings-dialog-backdrop)或 Provider 配置弹窗(.config-panel-root.is-modal),弹窗标题栏与系统状态栏/灵动岛重叠,页签无法点击。

根因

两层,真机验证缺一不可:

  1. 两个遮罩 inset: 0 垂直居中且无 env(safe-area-inset-*) 避让;standalone 下 dvh 不含状态栏条而画布从屏幕顶开始,居中后头部落入状态栏区域。
  2. 只给遮罩加 padding 不够:.settings-dialog-surfaceheight: 84vh 中 standalone 的 vh 含状态栏条(偏大),会把头部重新顶回状态栏;且真机上 env(safe-area-inset-top) 可能返回 0(viewport-fit=cover 已确认存在)。

修复

app/settings.css 新增 standalone 媒体查询块:

  • 遮罩 padding-top: max(59px, env(safe-area-inset-top))padding-bottom: max(24px, env(safe-area-inset-bottom))(env 可用时取更大值,不可用时硬兜底);
  • 两个弹窗 surface max-height: 100%,限制在留白后的内容区内。

测试

  • 新增 MobilePwaLayout.test.mjs 断言(跟随 fix: fill the iOS standalone PWA viewport #547 建立的既有范式),node --test components/MobilePwaLayout.test.mjs 5/5 通过;
  • iPhone(灵动岛机型,iOS PWA standalone)真机验证:弹窗标题栏回到状态栏下方,页签恢复正常点击。

@agegr
agegr merged commit a3bbdee into agegr:main Aug 26, 2026
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.

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

2 participants