position: relative直接加在动画元素上会触发重排，因其强制浏览器重新计算布局；正确做法是将其设在父容器作为定位上下文，子元素用absolute脱离文档流并仅通过transform动画。
position: relative 直接加在动画元素上会触发重排
直接给要动画的元素设 position: relative，等于主动告诉浏览器“这个元素位置可能变，周围布局得跟着算”，哪怕只改 top: 1px，整行文字都可能重绘一帧。Safari 和低端安卓 WebView 尤其敏感，首帧跳、末帧抽搐就是典型表现。
- 常见错误：表单提示用
.error-tip { position: relative; top: -8px; }配合 JS 显示/隐藏 - 导航下划线用
::after+position: relative+width过渡 - 弹窗遮罩层设
position: relative再靠z-index控制层级
真正该做的是把 position: relative 加在父容器上——它只当“定位上下文”，不参与动画；动画子元素用 position: absolute 脱离文档流，再全程只动 transform。
伪元素 ::before / ::after 动画容易撕裂
伪元素默认继承父级定位上下文，但不自动继承 transition。如果父元素有 position: relative，而伪元素又没单独声明 transition 或用了 width、background-color 这类触发重排/重绘的属性，就会出现“滞后一帧”的视觉撕裂。
-
background-color: transparent → #1a1a1a过渡中断（transparent不可插值） - 父元素用
transform位移，伪元素却靠top微调，重排时机错乱 - JS 切主题后立刻读
getComputedStyle(el).color，强制同步重排清空过渡队列
解法很简单：伪元素必须显式声明 transition，且只作用于 transform 和 opacity；初始锚点用 top/left 定死，动画过程只改 transform。
移动端刷新白屏 = 关键样式没抢到首帧
白屏不是 bug，是浏览器在 CSSOM 构建完成前，用默认白色背景绘制了 body。加 body { background-color: #000 } 能压住第一帧，但只是治标；FOUC（文字错位、按钮跳动）依然存在。
- 必须内联“首屏关键 CSS”：影响 viewport 内所有可见节点的最小样式集，比如
.header、.hero-title的color、font-size、display - 内联体积控制在 ≤14KB，禁用
@import、url(...)，否则失效 - JS 主题切换别等到
DOMContentLoaded后才加 class，先用<style media="print"></style>占位，加载完再激活
验证方式：DevTools → Network → Offline，刷新看首屏是否仍清晰——这是唯一靠谱的判断依据。
fixed 元素抖动本质是合成层没对齐
WKWebView 和旧版安卓 WebView 对 position: fixed 支持不稳定，尤其当祖先元素带 transform、filter 时，fixed 会被降级成 absolute，定位基准从视口变成父容器，结果就是导航栏随滚动“掉下去”几十像素。
- 用 Safari DevTools 的 Layers 面板确认目标元素是否出现在 “Composited Layers” 里
- 滚动必须交给子容器：设
body { height: 100vh; overflow: hidden; }，再用.scroll-container承载内容并启用-webkit-overflow-scrolling: touch - 避免
top: 50%+transform: translateY(-50%)，小数像素（如bottom: 44.2px）会让 iOS 反复插值，视觉上就是“一卡一卡”
最省事的替代方案其实是 position: sticky：语义更准、滚动更稳、无遮挡问题，iOS 12.2+ 和 Chrome 56+ 都支持，比硬扛 fixed 兼容性更可持续。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
