Bug: 华为浏览器页面布局错位 - 弹窗与侧边栏重叠
Pre-checks
Deployment Method
Docker / Self-hosted / Cloud
Description
在华为浏览器（Huawei Browser）中访问 Clawith 平台时，页面布局出现严重错位：
- "No company model configured" 弹窗与左侧边栏重叠
- 侧边栏与主内容区比例异常
- 弹窗层级（z-index）未正确生效
Steps to Reproduce
- 使用华为浏览器（Android 版本）访问 Clawith 平台
- 进入任意需要配置公司模型的 Agent 对话页面
- 观察弹窗显示效果
Error Screenshot
Root Cause Analysis
华为浏览器内核特性：
- 基于 Android WebView，对现代 CSS 特性兼容性有限
- 对
position: fixed、z-index、flexbox 的支持存在差异
- 需要添加 vendor prefixes（
-webkit-）和降级处理
具体问题：
- 弹窗未正确使用
position: fixed + 完整 viewport 覆盖
- 缺少
isolation: isolate 创建独立 stacking context
- Flex 布局未设置
flex-shrink: 0 和 min-width: 0
- 缺少华为浏览器特定的 meta 标签
Environment
- 浏览器：Huawei Browser（华为浏览器）
- 内核：Android WebView / 华为自研内核
- Clawith 版本：最新版本
- 部署方式：所有环境
Expected Behavior
页面布局正常，弹窗正确覆盖在主内容区上方，侧边栏与主内容区比例正确。
Actual Behavior
弹窗与侧边栏重叠，布局错乱，影响用户正常使用。
Suggested Fix
1. HTML Meta 标签（必须添加到 <head>）
<meta name="renderer" content="webkit">
<meta name="force-rendering" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
2. CSS 修复 - 弹窗层级
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
-webkit-transform: translateZ(0); /* 触发 GPU 加速 */
transform: translateZ(0);
z-index: 9999;
isolation: isolate; /* 创建独立 stacking context */
background: rgba(0, 0, 0, 0.5);
}
.modal-content {
position: relative;
z-index: 10000;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}3. CSS 修复 - Flex 布局兼容
.app-container {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
flex-direction: row;
height: 100vh;
overflow: hidden;
}
.sidebar {
width: 240px;
min-width: 240px;
-webkit-flex-shrink: 0;
flex-shrink: 0; /* 禁止收缩 */
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.main-content {
-webkit-box-flex: 1;
-webkit-flex: 1 1 0;
flex: 1 1 0;
min-width: 0; /* 关键：防止内容溢出 */
overflow: auto;
-webkit-overflow-scrolling: touch;
}4. JavaScript 检测与特殊处理
// 华为浏览器检测
function isHuaweiBrowser() {
return /HuaweiBrowser|HUAWEI|Android.*Huawei/i.test(navigator.userAgent);
}
// 应用特殊样式
if (isHuaweiBrowser()) {
document.documentElement.classList.add('huawei-browser');
}/* 华为浏览器降级处理 */
.huawei-browser .modal-overlay {
position: absolute; /* 降级为 absolute */
-webkit-transform: none;
transform: none;
}
.huawei-browser .sidebar {
position: relative;
float: left;
}5. CSS 变量 Fallback
/* 为 CSS 变量添加 fallback 值 */
.sidebar {
width: var(--sidebar-width, 240px);
background: var(--sidebar-bg, #ffffff);
border-right: var(--sidebar-border, 1px solid #e0e0e0);
}Impact
- 严重程度：P1
- 影响所有使用华为浏览器的用户
- 页面布局错乱，影响用户体验和正常使用
- 可能导致用户无法完成关键操作（如配置公司模型）
Additional Context
测试建议：
- 在华为真机上测试（推荐使用 Huawei P/Mate 系列）
- 使用 Chrome DevTools 的 Device Mode 模拟华为浏览器 User-Agent
- 重点测试弹窗、侧边栏、表单等关键组件
相关资源：
请前端团队优先排查此问题，提供兼容性修复。
Bug: 华为浏览器页面布局错位 - 弹窗与侧边栏重叠
Pre-checks
Deployment Method
Docker / Self-hosted / Cloud
Description
在华为浏览器（Huawei Browser）中访问 Clawith 平台时，页面布局出现严重错位：
Steps to Reproduce
Error Screenshot
Root Cause Analysis
华为浏览器内核特性：
position: fixed、z-index、flexbox的支持存在差异-webkit-）和降级处理具体问题：
position: fixed+ 完整 viewport 覆盖isolation: isolate创建独立 stacking contextflex-shrink: 0和min-width: 0Environment
Expected Behavior
页面布局正常，弹窗正确覆盖在主内容区上方，侧边栏与主内容区比例正确。
Actual Behavior
弹窗与侧边栏重叠，布局错乱，影响用户正常使用。
Suggested Fix
1. HTML Meta 标签（必须添加到
<head>）2. CSS 修复 - 弹窗层级
3. CSS 修复 - Flex 布局兼容
4. JavaScript 检测与特殊处理
5. CSS 变量 Fallback
Impact
Additional Context
测试建议：
相关资源：
请前端团队优先排查此问题，提供兼容性修复。