环境
现象
PWA 中打开 设置 (模型/技能/常规等)或 Provider/API Key 配置弹窗,弹窗标题栏顶进系统状态栏,与时钟/灵动岛重叠,页签无法点击。关闭重装 PWA 均复现。
根因(两层,缺一不可)
#547 让页面画布延伸到状态栏底下,主界面头部已用 env(safe-area-inset-top) 避让,但弹窗遮罩没有,且单独补 padding 也不够:
遮罩无安全区避让 :.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 注释记录的同一怪癖),居中后弹窗头部正好落在状态栏区域。
只加 padding 会被弹窗高度吃回去 (真机实测):.settings-dialog-surface 的 height: 84vh 里 standalone 的 vh 含 状态栏条(偏大),会重新顶进状态栏;surface 必须同时限制在留白后的内容区内。
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。
环境
现象
PWA 中打开 设置(模型/技能/常规等)或 Provider/API Key 配置弹窗,弹窗标题栏顶进系统状态栏,与时钟/灵动岛重叠,页签无法点击。关闭重装 PWA 均复现。
根因(两层,缺一不可)
#547 让页面画布延伸到状态栏底下,主界面头部已用
env(safe-area-inset-top)避让,但弹窗遮罩没有,且单独补 padding 也不够:.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 注释记录的同一怪癖),居中后弹窗头部正好落在状态栏区域。.settings-dialog-surface的height: 84vh里 standalone 的vh含状态栏条(偏大),会重新顶进状态栏;surface 必须同时限制在留白后的内容区内。viewport-fit=cover已确认在 meta 中,但env(safe-area-inset-top)仍疑似返回 0,因此用max(59px, env(...))硬兜底(59px ≈ 灵动岛机型状态栏高度)。已验证修复(iPhone PWA 实测通过)
修复 PR 随后附上(含测试)。此前分散在 #602 的讨论已并入本 issue。