2026-05-18-19-06-50 构建网页端分割工作台

工程分析/经验记录.md

@@ -45,3 +45,15 @@ B. 产生问题原因：Playwright 包体积较大，当前网络下载速度或
 C. 解决问题方案：终止该安装进程，改用系统已有 `google-chrome --headless` 截取首页，并使用当前已安装的 OpenCV 将真实页面截图和真实 API 分割结果合成为演示 mp4。
 
 D. 后续如何避免问题：演示录制优先复用本机已有工具；只有确实需要完整浏览器交互录屏时，再单独安装 Playwright 并预留下载时间。
+
+## 2026-05-18-19-06-50 网页端工作台增强
+
+### 1. CSS 覆盖 hidden 导致初始预览控件显示
+
+A. 具体问题：Chrome headless 截图发现初始页面里本应隐藏的视频控件和图像预览同时显示，破坏首屏布局。
+
+B. 产生问题原因：CSS 中对 `#videoPreview`、`#imagePreview` 设置了 `display: block`，其选择器优先级覆盖了浏览器对 `hidden` 属性的默认 `display: none`。
+
+C. 解决问题方案：在全局 CSS 中增加 `[hidden] { display: none !important; }`，确保所有使用 `hidden` 的状态元素都能可靠隐藏。
+
+D. 后续如何避免问题：前端页面涉及显隐状态时，必须用 headless 截图检查初始状态；如果自定义了 display 样式，需要显式保护 `[hidden]`。