Mac WebView 下表格表头吸顶错位问题复盘：`zoom`、尺寸 API 与坐标系混用

背景

在 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 中，可能出现：

1. 副本表头 left 偏大；
2. 副本表头高度偏高；
3. 实际约 51px 的表头高度，被计算成约 72px；
4. 表头文字换行和原表格不一致，导致高度继续异常。

排查时发现页面存在类似：

<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;
}

这样副本表格仍然使用原始表格的布局算法，列宽更容易保持一致。

推荐实现思路

最终可以采用这样的方案：

1. 不移动原始表头；
2. 在固定信息区内部追加一个表格副本容器；
3. 滚动到指定位置时显示副本表头；
4. 原始表头设置为不可见；
5. 离开吸顶区域后隐藏副本表头，恢复原始表头；
6. 副本表格复制整张原表；
7. 外层容器使用 overflow: hidden 只显示表头；
8. Mac WebView 或存在缩放的环境下，使用布局尺寸修正高度和宽度；
9. 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 像素。