移动端:布局变化后聊天编辑器变得过大(JS 测量的高度过时)
作者: nico7master创建于 2026年9月4日更新于 2026年9月4日
移动设备: 当布局发生变化时,聊天编辑器变得过大(过时的 JS 测量高度)## 摘要在移动设备上,聊天编辑器(输入框)有时会渲染得比其内容高得多,并且保持这种状态,直到用户再次输入。它是间歇性的:打开聊天,打开侧栏或键盘出现/消失都会使框变得过大。一旦用户按下键盘,框突然恢复到正确的大小 - 这使得错误看起来是随机的。## 重现1. 在手机上打开 Agent Zero(或具有触摸模拟的窄浏览器窗口)。2. 启动应用程序(欢迎页面),然后打开侧栏并切换到聊天。3. 观察聊天编辑器:它通常比一行高得多,没有内容来证明它。4. 在编辑器内点击(打开键盘)或输入任何字符 - 框会恢复到正确的大小。此外,在某些设备上输入长消息(框变大),然后清除它 - 框可能保持大小直到下一次输入事件。## 根本原因webui/components/chat/input/input-store.js,adjustTextareaHeight():```jsadjustTextareaHeight($event = null) {const target = $event?.target || null;for (const chatInput of this._composerTextareas(target)) {chatInput.style.height = "auto";chatInput.style.height = chatInput.scrollHeight + "px";// 选择由高度赋值引发的任何布局移动chatInput.style.height = Math.max(chatInput.scrollHeight, parseInt(chatInput.style.height)) + "px";} }````Math.max行在提交 a0fc9367("修复: 在输入时聊天输入震动")中添加,作为防抖措施。在单次循环中,它接近于无操作(scrollHeight总是大于刚刚赋予的高度),但更深层次的问题是显式的像素高度本身: - 聊天编辑器(webui/components/chat/input/chat-bar-input.html中的 #chat-input)是一个**可编辑内容的 div**,它本身会根据内容自动调整大小。- 在过渡布局状态(欢迎→侧栏动画,聊天切换仍在渲染, @font-face切换,键盘导致的视觉视口变化)中测量的显式像素高度会冻结扩大的值。- 高度重新计算只在输入事件(以及少数存储操作)中运行,因此过大的框会一直存在,直到用户输入 - 这与"有时很大,然后在我按下它时它会恢复"症状相匹配。- 此外,在移动设备上打开屏幕上的键盘时,CSS 限制max-height: 30vh` 使用的视口单位不会缩小。## 建议的修复停止计算显式高度;让可编辑内容元素自己调整大小,并让…
内容来源: agent0ai/agent-zero