dcloudio / dcloudio/uni-app

[app-harmony] webview 每个页面实例首次软键盘弹出时会额外原生上推视口一次,且 adjustPosition/softinputMode 均无效

Open
#6,034 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
41.6k
Forks
3.7k
Avg merge
7h 6m
Merged PRs (30d)
6

Description

# [app-harmony] webview 每个页面实例首次软键盘弹出时会额外原生上推视口一次,且 adjustPosition/softinputMode 均无效

## 问题分类

app-harmony(鸿蒙 App)/ 软键盘 / webview 渲染

## 环境信息

- 编译器:HBuilderX(版本请补充:帮助 → 关于)
- 项目类型:uni-app(Vue3 组合式 API),编译目标 app-harmony
- 鸿蒙设备:HarmonyOS 5.0(compatibleSdkVersion 5.0.0(12)),真机
- 渲染层:ArkWeb webview

## 现象

在每个页面(webview 实例)**首次**弹出软键盘时,系统会把整个 webview 视口原生上推约一个键盘高度(类 adjustPan 行为),此行为:

1. **无视 textarea/input 的 `:adjust-position="false"`**——组件已显式关闭避让,视口仍被上推;
2. **无视 pages.json 页面 style 的 `"app-harmony": { "softinputMode": "adjustResize" }`**——配置后行为无任何变化;
3. **JS 层完全不可观测**——上推期间 `window.scrollX/scrollY` 始终为 0(renderjs 中以 50ms 轮询实测),无法检测也无法用 `scrollTo` 撤销,推断为原生层视口平移而非 DOM 滚动;
4. **仅每个 webview 实例的首次键盘弹起发生一次**——失焦后视口复位,同一页面实例内后续聚焦不再上推;退出页面再进入(新 webview 实例)后又会复现一次。

## 造成的业务问题

我们的聊天输入条采用社区通用方案:`adjust-position:false` + 监听 `@keyboardheightchange` 用 `transform: translateY(-键盘高度)` 抬升输入条(微信小程序 / iOS / Android 三端一致可用;Android 基座已改 adjustResize 并停用 JS 抬升)。

在鸿蒙上,页面首次聚焦时「系统原生上推一个键盘高度 + JS 抬升一个键盘高度」叠加,输入框被顶到屏幕上部约两个键盘高度处,页面内容被顶出可视区;同一页面后续聚焦(系统不再上推)则表现正常。用户每次进入页面的第一次输入都会遇到明显异常。

## 复现步骤(最小化)

1. 新建 uni-app Vue3 项目,页面底部放置 ``,`onKb` 中对输入条容器施加 `transform: translateY(-height px)`;
2. 编译运行到鸿蒙真机;
3. 进入页面后第一次点击 textarea 聚焦:输入条被抬升约两个键盘高度(系统上推 + transform 叠加);
4. 收起键盘再次聚焦:仅 transform 生效,位置正确;
5. 返回上一页,再次进入该页面,重复步骤 3:异常再次复现。

## 期望

任一即可解决:

1. app-harmony 端尊重 `adjust-position="false"`,不做原生视口上推;
2. 或支持页面/全局的 `softinputMode`(adjustResize / adjustPan)配置,行为与 Android 端对齐;
3. 或至少保证同一 webview 实例内行为一致(当前「仅首次上推」的不一致性使应用层无法做任何确定性补偿)。

## 已尝试且无效的规避

- 页面 style 配置 `app-harmony.softinputMode: "adjustResize"`:被忽略;
- 聚焦瞬间用缓存键盘高度预抬升(抢在系统判定前让输入框可见):原生上推决策早于 JS 渲染上屏,无效;
- renderjs 监听 focusin 并轮询回写 window.scroll:上推不体现在 window.scroll,检测不到;
- 页面打开时程序化聚焦/失焦「预热」消耗首次上推:键盘可见闪动,用户体验不可接受。

Contributor guide

Open the contributing guide

Research direction

Reproduce the issue with the minimal uni-app Vue3 page containing a textarea, the app-harmony pages.json softinputMode setting, and the keyboardheightchange handler on a HarmonyOS 5.0 device. Start by tracing app-harmony ArkWeb soft-input handling and how it applies adjust-position and softinputMode. Done means the first and later focuses behave consistently without doubling the application’s keyboard-height transform.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
mobile-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.