修复移动端软键盘页面弹跳黑底

移除 H5 软键盘打开时平台壳全局 transform 位移,避免浏览器原生避让后再次弹跳。

保留键盘打开状态、底部 dock 隐藏和浅色根背景兜底,避免短表单露出黑色宿主底色。

补充小程序 web-view 原生 page 浅色背景和对应样式测试。

更新统一创作页与平台键盘适配文档,沉淀不再全局上移平台壳的约束。
This commit is contained in:
2026-06-07 18:17:23 +08:00
parent 56a9075582
commit 665f09f047
11 changed files with 304 additions and 115 deletions

View File

@@ -649,9 +649,9 @@
## 2026-05-14 移动端输入法弹出时平台画布不压缩
- 背景:平台根壳使用 `100dvh` 后,手机浏览器输入法弹出会让可见视口变小,导致创作首页、推荐页等固定游戏式画布被重新压缩。
- 决策:主站入口统一注册移动端输入法聚焦适配;输入法未打开时记录稳定布局高度,输入法打开期间 `.platform-viewport-shell` 不跟随 `visualViewport.height` 缩小,通过 `--platform-keyboard-focus-offset` 上移画面聚焦当前输入框,并临时隐藏移动端底部 dock
- 决策:主站入口统一注册移动端输入法聚焦适配;输入法未打开时记录稳定布局高度,输入法打开期间 `.platform-viewport-shell` 不跟随 `visualViewport.height` 缩小,但不再通过 `--platform-keyboard-focus-offset` 全局上移画布,避免 H5 / 小程序 `web-view` 原生输入法避让和平台壳二次位移叠加。键盘打开时只记录 `data-mobile-keyboard-open`、设置底部 inset、隐藏移动端底部 dock并把可能露出的 `html` / `body` / `#root` 背景切到平台浅色底
- 影响范围:主站平台壳、移动端创作首页底部输入框、后续所有复用 `.platform-viewport-shell` 的输入表单;业务组件不重复注册键盘适配。
- 验证方式:手机竖屏点击输入框,画布不压缩,输入框移动到输入法上方;输入法关闭后画布回位,底部 dock 恢复。
- 验证方式:手机竖屏点击输入框,画布不压缩也不整体弹起;输入法关闭后键盘状态清除,底部 dock 恢复。
- 关联文档:`docs/technical/【前端体验】移动端输入法不压缩画布聚焦方案-2026-05-14.md``docs/experience/MOBILE_UI_DEV_EXPERIENCE.md`
## 2026-05-14 抓大鹅物品素材批量重新生成复用 item-assets 替换模式

View File

@@ -2085,8 +2085,8 @@
## 统一创作页短表单软键盘打开不要露出黑底
- 现象:小程序 / 移动端点击拼图或敲木鱼创作输入框后,输入框和键盘之间出现一大片黑色区域;跳一跳因为按钮区用 `mt-auto` 撑开页面,看起来没有同样问题。
- 原因:移动键盘处理会用 `--platform-keyboard-focus-offset``.platform-viewport-shell` 整体上移;`UnifiedCreationPage` 内容区如果用 `min-h-max` 按短内容收缩,且统一页自身没有平台背景,键盘压缩或位移动画期间会露出 `body` 的黑色宿主底色
- 处理:`UnifiedCreationPage` 根容器必须保留 `bg-[image:var(--platform-body-fill)]``overscroll-contain`,内容区必须用 `flex-1 min-h-0` 占满统一页剩余高度;不要只给某个玩法工作台单独加高度补丁。
- 验证:`npm run test -- src/components/unified-creation/UnifiedCreationPage.test.tsx src/components/unified-creation/UnifiedCreationWorkspace.test.tsx`;移动端点击拼图、敲木鱼、跳一跳输入框时,键盘上方应持续显示平台浅色背景。
- 关联:`src/components/unified-creation/UnifiedCreationPage.tsx``src/mobileViewportKeyboardFocus.ts``docs/【玩法创作】平台入口与玩法链路-2026-05-15.md`
- 现象:小程序 / H5 移动端点击拼图或敲木鱼创作输入框后,输入框和键盘之间出现一大片黑色区域;H5 还会明显弹一下。跳一跳因为按钮区用 `mt-auto` 撑开页面,看起来没有同样问题。
- 原因:移动键盘处理会用 `--platform-keyboard-focus-offset``.platform-viewport-shell` 整体上移;但 H5 浏览器和小程序 `web-view` 已会自行处理输入框可见性,二次整体上移会造成页面弹跳并露出 `body` 或原生 `page` 的黑色宿主底色。统一创作短表单若内容区按短内容收缩,也会放大这个黑底暴露
- 处理:`UnifiedCreationPage` 根容器必须保留 `bg-[image:var(--platform-body-fill)]``overscroll-contain`,内容区必须用 `flex-1 min-h-0` 占满统一页剩余高度;移动端键盘打开时只记录 `data-mobile-keyboard-open`、隐藏底部 dock、设置键盘 inset 和浅色 `--platform-keyboard-exposed-fill`,不要再对 `.platform-viewport-shell` 做全局 `transform`;小程序 `pages/web-view``page` 和 web-view class 也要用浅色背景。不要只给某个玩法工作台单独加高度补丁。
- 验证:`npm run test -- src/components/unified-creation/UnifiedCreationPage.test.tsx src/components/unified-creation/UnifiedCreationWorkspace.test.tsx src/mobileViewportKeyboardFocus.test.ts src/index.test.ts miniprogram/pages/web-view/index.style.test.js`;移动端点击拼图、敲木鱼、跳一跳输入框时,页面不应整体弹起,键盘上方应持续显示平台浅色背景。
- 关联:`src/components/unified-creation/UnifiedCreationPage.tsx``src/mobileViewportKeyboardFocus.ts``src/index.css``miniprogram/pages/web-view/index.wxml``miniprogram/pages/web-view/index.wxss``docs/【玩法创作】平台入口与玩法链路-2026-05-15.md`