返回博客

Electron 原生视图宽度被砍两刀：inset 与 flex 兄弟节点的双重扣减

在 Electron 桌面应用里嵌入原生浏览器视图时，常见做法是在 HTML 里放一个占位 <div>，用 getBoundingClientRect() 量出它的位置，再调 setBounds 把 WebContentsView 贴到那块区域上。这套逻辑本身没有问题，但当页面同时有一个侧边面板时，很容易踩进一个「宽度被砍两刀」的坑——原生视图和面板之间出现一道等宽空白带，宽度恰好等于侧面板的宽度。

现象

新页面布局：左侧嵌入浏览器，右侧固定宽度侧边面板。从另一个「已知正常」的页面复制了一行 rightInsetPx={panelWidth}，打包后发现：

  • 原生视图和侧边面板之间出现了一道空白竖带，宽度 = panelWidth
  • 视图实际宽度 = 容器宽度 − 2 × panelWidth
  • next dev 里看不到问题（原生视图不渲染），只有打包后才复现

根因

rightInsetPx 的作用是从已量好的占位元素宽度里再减去一段，供面板叠加在占位元素上方时使用：

const rect = viewport.getBoundingClientRect()
const width = Math.max(0, rect.width - rightInsetPx)  // ← 从 rect 再扣
await browser.setBounds({ x: rect.x, y: rect.y, width, height: rect.height })

关键在于「rect.width 已经是多少」：

| 面板摆法 | 占位元素量到的宽度 | 正确的 inset | |---|---|---| | 面板是 flex/grid 兄弟节点，CSS 已压缩占位元素 | 容器 − panelWidth | 0 | | 面板 absolute/fixed 叠加在满宽占位元素上方 | 容器 | panelWidth |

当面板是 flex 兄弟节点时，CSS 布局已经把占位元素的宽度压到 容器 − panelWidth。若同时传 rightInsetPx={panelWidth}，就会再扣一次，结果是 容器 − 2 × panelWidth，多出的那 panelWidth 就是那道空白带。

坑：从别的页面复制 inset 值而不看布局结构

rightInsetPx 不是「侧面板的宽度」的通用配置项——它是「占位元素被多量了多少」的补偿值。不同页面的布局策略不同，这个数字的语义完全不一样，盲目复制会让视图缩两次。

正解

先看 JSX：侧面板是占位元素的 flex 兄弟节点，还是绝对定位叠在上面的？

flex/grid 兄弟节点 → rightInsetPx={0}，让 CSS 布局负责裁剪，不需要 inset 补偿：

// 面板是 flex 兄弟节点 → inset 置 0，不要传 panelWidth
<div className="flex h-full">
  <section className="flex-1">
    <NativeBrowserSurface rightInsetPx={0} {/* 不是 panelW！ */} />
  </section>
  <aside className="shrink-0" style={{ width: panelW }}>
    {/* 侧边面板 */}
  </aside>
</div>

面板叠加（absolute/fixed）在满宽占位元素上 → rightInsetPx={panelWidth}，此时占位元素满宽，需要靠 inset 手动留出空间。

组件内部若有 ResizeObserver 监听占位元素（常见实现），当面板展开/收起导致 flex 子元素宽度变化时，setBounds 会自动重新同步，不需要任何额外处理。

正解：按布局策略决定 inset，而不是按面板宽度

flex/grid 兄弟节点布局 → inset = 0，CSS 已经量好了；叠加布局 → inset = panelWidth，手动补偿满宽测量的多余部分。每次接入都要看 getBoundingClientRect() 量到的是什么宽度，而不是从别处复制。

排查思路

  1. 空白带宽度 = 某个固定值 → 大概率是某个尺寸被双重扣减
  2. 用 DevTools 量占位元素的实际宽度：如果已经是 容器 − panelWidth，说明 CSS 布局已经裁了一刀，inset 应为 0
  3. 搜全局，找所有传给同一组件的 rightInsetPx / bottomInsetPx 调用处，逐一核对它们各自页面的布局策略

一句话外卖

rightInsetPx 是「测量补偿」，不是「面板宽度」——占位元素量到的宽度已经是多少，inset 才该填多少，从别人页面复制这个数字之前先看清楚对方量的是什么。