快速结论:该问题出现在 Open WebUI 文件模态框的 Preview 标签页中,DOCX 和 PPTX 预览内容溢出模态框,导致缩放控件、幻灯片导航和当前幻灯片超出可视区域。优先检查预览根容器的 height 是否被正确约束,以及内部滚动容器是否因父级高度未定义而无法触发滚动。
适用环境:Open WebUI dev 分支(commit 7229fac0c),Docker :dev 镜像或 Git Clone 开发版;Linux 操作系统;Chromium 内核浏览器(布局问题,非浏览器特定)。
最快修复方案:暂无确认的一步修复方案。Issue 已确认问题存在并标记为 bug,但讨论中未提供已验证的补丁或 workaround。
注意事项:Issue 正文详细测量了布局参数,但未给出明确修复代码。相关 Issue #28563 涉及同一 PPTX 预览路径下的空白主面板问题,可能关联同一布局缺陷。
问题场景
在 Open WebUI 聊天界面中,点击文件卡片打开模态框,切换到「Preview」标签页查看多页 DOCX 或 PPTX 文件时触发。DOCX 预览的缩放控件(-/N%/+)会随文档滚动而移出视野;PPTX 预览的首张幻灯片出现在折叠线以下,导航按钮和缩放控件沉底,缩略图轨道无法内部滚动。
报错原文
issue: docx and pptx file previews overflow the modal, controls scroll away and slides open below the fold
The preview frame never gets a definite height, so nothing inside it can scroll and the modal body scrolls the entire preview instead.
DOCX: the preview root is capped at 367px (60vh) but holds 4642px of visibly overflowing content; the inner `overflow-auto` container is fully grown (scrollHeight equals clientHeight at 4642px) so it never scrolls.
PPTX: the preview root computes to 1708px tall (the full height of a 24 thumbnail rail) instead of 367px; the slide's top edge sits at 761px, past the 612px viewport; the controls sit at 1813px.
原因分析
可能原因:DOCX 和 PPTX 预览组件均构建为 relative 定位的框架,内部使用 overflow-auto 滚动容器,并将叠加控件设置为 absolute bottom-3。这种布局要求框架必须有确定的(definite)高度,但实际运行时两个预览的根容器均未获得限定高度:DOCX 的根容器被 60vh 上限约束,但内部滚动容器高度膨胀至内容全高,导致滚动失效;PPTX 的根容器高度直接等于缩略图轨道总高(如 1708px),而非视口内的期望高度(367px)。两个组件各自有不同原因导致未收到明确高度,但共同结果是模态框 body 成为唯一滚动容器,破坏了预期的内部滚动和控件锚定。
环境排查
- Open WebUI 版本:
dev@7229fac0c(Issue 发布时确认复现) - 安装方式:Docker
:dev镜像、Git Clonedev分支 - 操作系统:Linux
- 浏览器:Chromium 内核(布局问题,跨浏览器存在)
- 测试条件:612px 高的视口;PPTX 需约 8 张以上幻灯片使缩略图轨道超过模态框高度
解决步骤
- 在 Open WebUI 的
dev分支上检查FileItemModal组件中 DOCX/PPTX 预览的 CSS 类名,定位预览根容器的height计算逻辑。 - 检查 DOCX 预览内部
overflow-auto容器的父级链,确认是否存在height: 100%或flex-1等约束缺失导致高度计算失败。 - 检查 PPTX 预览的缩略图轨道是否直接撑开根容器高度,确认根容器是否应固定为
60vh或其他明确的视口比例高度。 - 对比相关 Issue #28563(同样涉及 PPTX 预览布局问题),确认是否为同一
PptxPreview路径下的共同缺陷。 - 验证
absolute bottom-3控件是否能随框架高度固定而锚定在预期位置。
验证方法
在修复后,于最小 612px 高度的视口中重复复现步骤:上传多页 DOCX 和至少 8 张幻灯片的 PPTX,切换至 Preview 标签页后确认(1)DOCX 的缩放控件在滚动文档时保持可见;(2)PPTX 当前幻灯片首屏直接可见;(3)PPTX 导航/缩放控件锚定在模态框底部,缩略图轨道可内部滚动。
参考来源
AI 工具推荐
想把多个 AI 模型放在一个入口?
GamsGo AI 集成 ChatGPT、DeepSeek、Gemini、Claude、Midjourney、Veo 等常用模型,适合写作、绘图、视频和日常 AI 工作流。
推广链接:通过此链接购买,我可能获得佣金,不影响你的价格。
这个方案解决了吗?
可以继续搜索完整报错,或查看同一工具的其他排查指南。
![[deepseek-v4-flash-sm86 fork] PP8 + DSpark: recurring deadlock in the V2-runner PP sampled-token/draft broadcast protocol (PPHandler)](https://www.chat-gpts.plus/wp-content/uploads/2026/08/53402-1007c917-768x403.jpg)

