ios safari 中 position: fixed 失效是因祖先元素触发新包含块（如 transform），导致 fixed 相对祖先而非视口；需移除干扰样式、将元素挂载 body 下、加 backface-visibility: hidden 并防键盘挤压。
position: fixed 在 iOS Safari 中“失效”，90% 不是写错了，而是它被浏览器悄悄降级为 relative 或 absolute 了——你得先确认它到底有没有真正在视口上固定。
为什么 fixed 元素在 iOS 上会“跟着滚动”
这不是 bug，是 CSS 规范行为：只要任意祖先元素设置了 transform、filter、opacity、perspective 或 will-change（哪怕只设了 transform: translateZ(0)），就会创建新的包含块，导致 position: fixed 失去对视口的锚定，转而相对于该祖先定位。
- 常见触发点：Vue/React 组件外层 wrapper 加了
transform: translateZ(0)做硬件加速；uni-app 的.uni-page-wrapper默认带transform；弹窗遮罩层加了backdrop-filter - DevTools 里看不出问题：元素 computed position 仍是
fixed，但 offsetTop/offsetLeft 已按祖先计算 - 真机表现：手指一拖动，导航栏就“抽搐一下”或缓慢偏移，松手后卡在错误位置
监听 scroll 事件时 fixed 元素永远不触发回调
fixed 元素本身不滚动，也不派发 scroll 事件——浏览器根本不会把滚动行为“转发”给它。iOS Safari 下，window.addEventListener('scroll', ...) 和 document.addEventListener('scroll', ...) 基本不可靠，因为页面滚动往往发生在某个子容器上，而非 body 或 html。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 必须用 DevTools 的 Elements 面板检查滚动条所在元素，看它的
computed overflow是否为auto或scroll - 典型滚动容器名：
.main-panel、.list-wrapper、.el-table__body-wrapper、.page-content - 监听前务必确认元素已挂载：
const el = document.querySelector('.scroll-area'); if (el) el.addEventListener('scroll', handler);
如何让 fixed 元素在 iOS 上真正“钉住”视口
核心思路是切断干扰源 + 显式保障合成层 + 防键盘挤压。不能只靠单一样式，要组合生效。
- 把 fixed 元素直接挂到
下，绕过所有可能带transform的中间 wrapper - 给 fixed 元素加
backface-visibility: hidden（比will-change更安全，不引发重排） - 禁用 body 滚动：
body { height: 100vh; overflow: hidden; }，再用子容器接管滚动：.scroll-container { height: 100vh; overflow-y: scroll; -webkit-overflow-scrolling: touch; } - 防滚动条宽度跳变：
body { padding-right: calc(100vw - 100%); }，配合body.modal-open { overflow: hidden; } - input 聚焦时被键盘顶起？别硬扛：监听
focus，临时切为position: absolute并手动算top（用window.innerHeight - input.getBoundingClientRect().bottom）
sticky 能替代 fixed 吗？要看场景
position: sticky 在 iOS Safari 15.4+ 支持良好，但它依赖父容器有明确高度或内容流——如果父容器 height: auto 且没撑开，sticky 就完全不触发。
- 适合场景：吸顶导航栏（父容器是
<main></main>且高度足够）、表格列头 - 不适合场景：全屏弹窗里的关闭按钮、底部常驻操作栏（父容器高度不确定时 fallback 不可控）
- 声明必须带前缀：
position: -webkit-sticky;+position: sticky;，且必须指定top或bottom
最易被忽略的是真机测试时机：iOS Safari 的 fixed 行为在 DevTools 模拟器里几乎全正常，但真机上一个 transform、一次键盘唤出、甚至地址栏收放都可能让 fixed 元素瞬间错位。别信模拟器，信 Safari 抓包 + iPhone 实录。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
