背景
在 Web 页面中，长表格常常需要实现“表头吸顶”效果：用户向下滚动时，表头固定在顶部或某个固定信息区下方，便于查看每一列的含义。
这个需求看起来很常见，但在某些 Mac WebView 环境中，可能出现只有特定客户端异常、普通浏览器正常的情况。例如：
- Windows 浏览器表现正常；
- Mac WebView 中表头出现横向错位；
- 表头高度异常；
left偏移明显偏大；- 某些列文字换行不同，进一步导致表头高度不稳定。
最终定位到核心原因：页面存在 body zoom 或类似缩放机制，导致 getBoundingClientRect() 获取到的是缩放后的视觉尺寸，而 style.width、style.height、style.left 写入的是布局尺寸。如果直接把视觉尺寸写回布局样式，就会造成尺寸或位置被二次放大。
问题现象
假设页面中有一个普通表格，滚动后需要固定表头。结构大致如下：
<div id="stickyInfo">
<div class="sticky-info-content">
<!-- 固定信息区 -->
</div>
</div>
<table class="ui-table">
<thead>
<tr>
<th>序号</th>
<th>名称</th>
<th>描述</th>
<th>状态</th>
<th>操作人</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 表格内容 -->
</tbody>
</table>
一种常见实现是：滚动到指定位置时，复制一份表格或表头，显示在固定区域下方；原始表头隐藏，用户看到的是副本表头。
在普通浏览器中，这种方案通常能正常工作。但在 Mac WebView 中，可能出现：
- 副本表头
left偏大； - 副本表头高度偏高；
- 实际约
51px的表头高度，被计算成约72px； - 表头文字换行和原表格不一致，导致高度继续异常。
排查时发现页面存在类似：
<body style="zoom: 1.37;">
这就是问题的关键线索。
为什么 zoom 会导致问题
前端开发中常用两类尺寸 API。
1. 布局尺寸
例如：
element.offsetWidth
element.offsetHeight
element.clientWidth
element.clientHeight
这些值更接近浏览器布局阶段使用的 CSS 像素，通常不包含 zoom 放大后的视觉结果。
例如：
thead.offsetHeight // 约 51
2. 视觉尺寸
例如：
element.getBoundingClientRect()
getBoundingClientRect() 返回的是元素在视口中的矩形信息。在存在 zoom 时，它更接近最终视觉渲染结果。
如果页面存在：
body {
zoom: 1.37; }
那么可能出现：
thead.offsetHeight // 51
thead.getBoundingClientRect().height // 约 70
因为：
51 * 1.37 = 69.87
这就是为什么实际高度约 51px，但代码计算出来接近 72px。
最容易犯的错误
常见写法如下：
var headHeight = thead.getBoundingClientRect().height;
cloneWrap.style.height = Math.ceil(headHeight) + 'px';
在没有缩放的浏览器中，这通常没问题。
但在存在 zoom 的 WebView 中，headHeight 已经是放大后的视觉高度。此时再写入：
cloneWrap.style.height = '72px';
这里的 72px 是布局 CSS 像素，页面渲染时还会继续受到 zoom 影响。
也就是说，代码把“视觉尺寸”当成“布局尺寸”写回去了。
这就是二次放大的根源。
left 偏移为什么也会错
left 的问题类似。
常见写法：
var tableRect = table.getBoundingClientRect();
var cloneRect = cloneWrap.getBoundingClientRect();
var leftDiff = tableRect.left - cloneRect.left;
cloneWrap.style.left = leftDiff + 'px';
问题在于：
tableRect.left是视觉坐标；cloneRect.left也是视觉坐标；- 两者相减得到的是视觉差值；
- 但
cloneWrap.style.left需要的是布局 CSS 像素。
如果页面存在 zoom: 1.37，那么视觉差值需要先除以缩放比例，再写回 style.left。
正确思路：
var scale = table.getBoundingClientRect().width / table.offsetWidth;
var leftDiff = (tableRect.left - cloneRect.left) / scale;
cloneWrap.style.left = Math.round(leftDiff) + 'px';
这样可以把视觉坐标差值转换回布局坐标。
为什么不建议只复制 thead
表头吸顶可以只复制 thead：
var clonedThead = thead.cloneNode(true);
但复杂表格里，这种方式很容易列宽不一致。
原因是 HTML 表格的列宽不是只由 thead 决定的，而是由以下因素共同影响：
- 表头内容；
- 表体内容；
- 单元格长文本；
- 百分比宽度；
- 固定宽度；
- 输入框、按钮等内部元素宽度；
- 父容器宽度；
- 浏览器表格自动布局算法。
如果只复制 thead，浏览器无法参考 tbody 内容重新计算列宽，副本表头就可能和原表格正文对不齐。
更稳的做法是复制整张表：
var clonedTable = table.cloneNode(true);
再通过外层容器控制高度和 overflow，只露出表头区域。
.fixed-head-copy-wrap {
position: relative;
overflow: hidden;
background-color: #fff;
box-shadow: 0 1px 4px rgba(0,0,0,.1);
z-index: 2;
}
这样副本表格仍然使用原始表格的布局算法，列宽更容易保持一致。
推荐实现思路
最终可以采用这样的方案：
- 不移动原始表头；
- 在固定信息区内部追加一个表格副本容器；
- 滚动到指定位置时显示副本表头；
- 原始表头设置为不可见；
- 离开吸顶区域后隐藏副本表头，恢复原始表头；
- 副本表格复制整张原表；
- 外层容器使用
overflow: hidden只显示表头； - Mac WebView 或存在缩放的环境下，使用布局尺寸修正高度和宽度；
left的视觉差值需要除以缩放比例。
核心代码示例：
function syncCloneSize() {
var tableRect = table.getBoundingClientRect();
var visibleRect = xScrollParent ? xScrollParent.getBoundingClientRect() : tableRect;
var tableWidth = isScaledWebView ? table.offsetWidth : tableRect.width;
var visibleWidth = isScaledWebView && xScrollParent ? xScrollParent.clientWidth : visibleRect.width;
var clonedTable = table.cloneNode(true);
disableCloneFields(clonedTable);
var clonedHead = clonedTable.querySelector('thead');
var headHeight = isScaledWebView ? thead.offsetHeight : thead.getBoundingClientRect().height;
cloneWrap.style.left = '';
cloneWrap.innerHTML = '';
cloneWrap.appendChild(clonedTable);
clonedTable.style.width = tableWidth + 'px';
clonedTable.style.margin = '0';
if (clonedHead) {
clonedHead.style.visibility = 'visible';
}
cloneWrap.style.width = Math.round(Math.min(visibleWidth, tableWidth)) + 'px';
cloneWrap.style.height = Math.ceil(headHeight) + 'px';
var oldDisplay = cloneWrap.style.display;
var oldVisibility = cloneWrap.style.visibility;
cloneWrap.style.display = 'block';
cloneWrap.style.visibility = 'hidden';
var cloneRect = cloneWrap.getBoundingClientRect();
var scale = isScaledWebView && table.offsetWidth ? tableRect.width / table.offsetWidth : 1;
var leftDiff = isScaledWebView ? (tableRect.left - cloneRect.left) / scale : tableRect.left - cloneRect.left;
leftDiff = Math.round(leftDiff);
if (Math.abs(leftDiff) > 1) {
cloneWrap.style.left = leftDiff + 'px';
}
cloneWrap.style.display = oldDisplay;
cloneWrap.style.visibility = oldVisibility;
cloneWrap.scrollLeft = xScrollParent ? xScrollParent.scrollLeft : 0;
}
复制整张表时，要注意表单提交风险
复制整张表有一个副作用：表格里的输入框、选择框、按钮也会被复制。
如果原表格在 <form> 内部，例如：
<form>
<table>
<input name="score" value="85">
</table>
</form>
复制整张表后，页面中可能出现两个同名输入框：
<input name="score" value="85">
<input name="score" value="85">
如果提交表单，或者执行：
$('form').serialize()
就可能把副本中的字段也提交上去，造成数据重复或异常。
所以副本表格必须只用于展示，不参与表单提交。
处理方式：
function disableCloneFields(root) {
var fields = root.querySelectorAll('input, select, textarea, button');
for (var i = 0; i < fields.length; i++) {
fields[i].setAttribute('disabled', 'disabled');
fields[i].removeAttribute('name');
fields[i].removeAttribute('id');
}
}
复制表格后立即调用：
var clonedTable = table.cloneNode(true);
disableCloneFields(clonedTable);
这样可以保证：
- 副本里的表单控件不会参与提交；
- 副本里的控件不会被表单序列化；
- 移除
id可以避免页面出现重复id。
为什么这类问题容易绕路
这类问题容易绕路，是因为表象是“表头错位”和“高度不对”，但根因不是普通 CSS 错误，而是坐标体系混用。
常见误判有三类。
误判一：以为是滚动时 top 计算抖动
最初可能会怀疑滚动时频繁读取和写入 top 导致抖动，于是尝试减少滚动计算，甚至考虑初始化时把 top 算好。
但这只能解决一部分滚动抖动，不能解决 WebView 中尺寸本身被缩放的问题。
误判二：以为是复制表头列宽不准
只复制 thead 后确实可能列宽不一致，所以改成复制整张表是必要的。
但复制整张表后，如果仍然存在高度和 left 问题，就说明根因可能不只是表格布局。
误判三：以为需要完全独立的 fixed 表头
有时会尝试把副本表头挂到 body 上，并使用 position: fixed 单独定位。
这个方向可能引入更多新问题：
- 脱离原始父容器；
- 脱离原表格布局上下文；
- 需要重新模拟宽度、left、高度；
- 更容易和 WebView 的缩放坐标冲突。
更稳的方向通常是：复用原表格布局，只修正尺寸 API 的单位差异。
经验总结
1. getBoundingClientRect() 不一定适合直接写回 style
尤其在存在：
zoom；- 页面缩放；
- WebView 容器；
- sticky/fixed 合成层；
- 高 DPR 屏幕；
- transform；
时，getBoundingClientRect() 获取的是视觉结果，不一定等于布局尺寸。
2. 写入 style.width/height/left 时要确认单位体系
style.width、style.height、style.left 接收的是布局 CSS 像素。
如果拿到的是视觉尺寸，需要先换算。
3. 判断是否存在缩放，可以比较 rect 和 offset
var scale = element.getBoundingClientRect().width / element.offsetWidth;
如果 scale 明显不等于 1，说明视觉尺寸和布局尺寸之间存在比例差。
4. 表格列宽复杂时，优先复制整张表
只复制 thead 很容易失去原始表格布局上下文。
复杂表格建议：
table.cloneNode(true)
再用外层容器裁剪显示表头。
5. 复制表单区域时必须处理 input
只要复制内容可能位于 <form> 内，就要处理副本中的表单控件：
input / select / textarea / button
否则可能造成重复提交。
最终结论
这个问题的根因不是简单的 CSS 表头吸顶问题，而是 WebView 中 zoom 或类似缩放机制导致的坐标体系差异。
最终解决原则是：
- 结构上：复用原表格布局，复制整张表；
- 显示上：外层容器只露出表头；
- 宽度上：缩放环境下优先使用
offsetWidth/clientWidth； - 高度上：缩放环境下优先使用
offsetHeight； - left 上：
getBoundingClientRect()的视觉差值需要除以缩放比例； - 表单安全上：副本表格内字段必须禁用并移除
name/id。
一句话概括：
在存在
zoom的 WebView 中，不要把getBoundingClientRect()的视觉尺寸直接写回style；写回前必须确认它是否需要转换为布局 CSS 像素。
