fixed定位必须挂到body下，避免嵌套在transform、filter等触发层叠上下文的父容器中；否则会降级为相对祖先定位，导致悬浮球点不中、位置漂移。
fixed定位必须挂到下，别嵌套在transform容器里
悬浮球点不中、位置漂移，八成是因为它被包在了 transform: translateZ(0) 或 filter: blur(1px) 的父元素里。fixed 元素一旦遇到这类触发层叠上下文的样式，就会降级为相对该祖先定位，而不是视口。
解决方案很简单：
- 把
<div id="back-to-top">直接写在<body>最底部，不要塞进<main>、<section>或任何带transform的 wrapper 里 - 检查
body和所有祖先是否写了transform、perspective、will-change—— 这些都得删或注释掉 - 真机测试时打开系统“放大字体”和“缩放辅助”，很多偏移只在这种组合下暴露
bottom值用calc(24px + env(safe-area-inset-bottom))，别碰vh或rem
iOS Safari 滚动时 5vh 会抖动，1rem 在用户调大系统字体后直接撑出屏幕，而键盘弹出时部分 Android 浏览器会错误重绘 bottom 却不更新点击热区。
稳妥写法只有一条路径：
立即学习“前端免费学习笔记（深入）”；
- 基础定位：
bottom: 24px（兼容所有旧浏览器） - 叠加安全区：
bottom: calc(24px + env(safe-area-inset-bottom)) - 禁用
inset简写 ——inset: 0 20px auto auto在 iOS 15.4 之前不支持 - 不用
@supports (env(safe-area-inset-bottom))包裹 —— 现代浏览器全支持，降级就走24px
点击反馈不能靠:hover，得用touchstart+mousedown双监听
几乎所有触控设备默认不触发 :hover，iOS 甚至要悬停 1.5 秒且无后续触摸才模拟一次 —— 用户根本不会等。
交互反馈必须由 JS 驱动：
- 给按钮加
tabindex="0"，保证键盘可聚焦 - 监听
touchstart和mousedown，动态添加.is-pressed类 - CSS 中只对
background-color和transform: scale()做transition，禁用transition: all - 加
touch-action: manipulation，避免 300ms 延迟
键盘弹出时按钮被顶飞？监听focusin动态调bottom
这不是 bug，是 Android Chrome 80+ 和某些国产 WebView 对 visualViewport API 支持不一致导致的 fixed 行为异常 —— 键盘弹起时页面被推高，但 fixed 元素的点击区域没同步上移。
修复逻辑很轻量：
- 监听
focusin事件，当input或textarea获焦时，临时设style.bottom = "calc(24px + env(safe-area-inset-bottom))" - 监听
blur恢复原始bottom: 24px - 更稳的替代：改用
position: sticky+margin-bottom，在 Chrome 115+ 和 Safari 16.4+ 中表现更一致
