ios safari 15.4 前 position: sticky 在可滚动容器内存在严重缺陷，表现为顶栏卡住、错位或消失，根源是 webkit 滚动状态同步竞态；15.4+ 修复大部分问题，但 16.0–16.3 又出现跳帧；降级推荐 transform + will-change + contain: layout paint，并运行时探测真实支持情况。
position: sticky 在 iOS 上不生效的典型表现
直接说结论：iOS Safari 15.4 之前版本对 position: sticky 的支持有严重缺陷，尤其在「可滚动容器内嵌套 sticky 元素」或「页面启用原生滚动回弹（overscroll bounce）」时，顶栏会卡住、错位甚至完全失效。
这不是你 CSS 写错了，而是 WebKit 渲染层在滚动状态同步上存在竞态——滚动过程中 sticky 元素的 offsetTop 计算滞后，导致定位逻辑反复重置。
- 常见错误现象：
position: sticky元素在 iOS 上首次滚动后“消失”，或只在松手瞬间闪现，再滚动就固定不动 - 必须满足两个条件才会触发该 bug：父容器设置了
overflow-y: auto（非 body 直接滚动），且容器高度未占满视口 - iOS 15.4+ 修复了大部分场景，但 iOS 16.0–16.3 又引入新问题：sticky 元素在快速滚动中会短暂脱离文档流，表现为“跳帧”
用 transform + will-change 强制重绘顶栏
当 position: sticky 不可靠时，最稳妥的降级方案是手动控制顶栏位置，用 transform: translateY() 模拟粘性效果。关键不是“多高级”，而是绕过 WebKit 的 sticky 计算链。
核心思路：监听容器 scroll 事件，根据 scrollTop 动态设置顶栏的 transform 值，并用 will-change: transform 提前告知浏览器该元素将频繁变化，避免每次重排。
立即学习“前端免费学习笔记（深入）”；
- 必须给顶栏加
contain: layout paint，否则 iOS Safari 会忽略will-change的优化提示 - 不要用
top或margin-top替代transform：前者触发重排，滚动会明显卡顿 - 监听节流要谨慎：iOS 上
requestAnimationFrame比setTimeout更准，但别在 rAF 里读取scrollTop——它可能不是最新值，应改用event.target.scrollTop直接取
viewport meta 标签对滚动行为的隐式影响
<meta name="viewport" content="width=device-width, initial-scale=1"> 看似只是缩放控制，但它实际决定了 iOS 是否启用「原生滚动回弹」——而 sticky 行为与回弹机制深度耦合。
如果你发现顶栏在某些 iOS 设备上偶尔正常、偶尔失效，大概率是 viewport 设置被动态覆盖或遗漏。尤其注意：
- 移除
user-scalable=no：它虽禁用双指缩放，但也会干扰 WebKit 对滚动容器的布局判定，间接导致 sticky 失效 - 避免
maximum-scale=1单独出现：iOS 15+ 中该配置会抑制 scroll event 的触发频率，使 sticky 位置更新延迟 - 如果业务必须禁用缩放，请用
touch-action: pan-y替代，它只限制 X 轴手势，不影响滚动事件精度
检测并动态降级 sticky 支持的最小可行代码
不能靠 UA 判断 iOS 版本——用户可能用 iPadOS、PWA、微信内置浏览器，它们的内核版本和行为差异极大。真实可用的方式是运行时探测。
下面这段代码会在页面加载后立即测试 sticky 是否真正生效，并在失败时自动切换到 transform 方案：
const testSticky = () => {
const el = document.createElement('div');
el.style.cssText = 'position: sticky; top: 0; height: 1px;';
document.body.appendChild(el);
const supports = getComputedStyle(el).position === 'sticky';
document.body.removeChild(el);
return supports;
};
if (!testSticky()) {
// 启用 transform 降级逻辑
initTransformSticky();
}
注意：getComputedStyle(el).position 返回 sticky 只代表语法支持，不代表滚动中能稳定工作。更严格的检测需构造一个带内容的滚动容器，在滚动后检查元素是否仍在视口顶部 —— 但多数项目不需要这么重，上面的轻量检测已覆盖 90% 的失效场景。
复杂点在于：同一个页面里，header 可能用 sticky，tabbar 又要用 transform，两套逻辑共存时，务必确保它们监听的是同一个滚动源，否则会出现“顶栏动了，底部 tabbar 还没跟上”的错位。这比写对单个定位方式更难，也更容易被忽略。
