浮动元素在旧版浏览器中抖动是因合成器对float定位基准处理不一致，导致滚动或动画时反复重算偏移量；根本解决法是用flex或grid替代float。
浮动元素在旧版浏览器（尤其是 Safari 14–15、Chrome 80–95、iOS WebKit 14–15）中抖动，不是因为“渲染慢”，而是这些版本的合成器对 float 元素的定位基准处理不一致——它们会在滚动或动画帧中反复重算浮动脱离文档流后的偏移量，导致视觉跳变。
浮动 + 弹性滚动（scroll-snap）时抖动最明显
当父容器设了 scroll-snap-type: x mandatory，而子元素用 float: left 排列时，Safari 和旧 Chrome 会因无法稳定锚定浮动元素的 layout 尺寸，频繁修正 snap 点位置。这不是 scroll-snap 本身的问题，而是 float 让 getBoundingClientRect() 返回值在帧间波动。
- 检查是否在
display: flex或display: grid容器里还写了float：规范要求忽略，但旧引擎仍尝试计算，引发布局冲突 - 避免在
scroll-snap-align元素上同时使用float和position: sticky：两者定位模型互斥，回滚时易触发连续重定位 - 若必须保留浮动，给其父容器加
display: flow-root（而非overflow: hidden），确保scroll-snap-margin计算有稳定高度依据
加 transform: translateZ(0) 反而更抖
这不是“硬件加速没开”，而是错误触发了图层分裂：浮动元素本已脱离文档流，再强制创建独立合成层，会让 Safari 的 subpixel 渲染错位放大，尤其在 macOS 下出现 0.3px 级别的定位漂移。
在 Linux 上通过 Chrome 挂载/VNC 自动发布小红书长笔记。Agent 撰写标题和正文后执行 xhs_publish.sh --publish --submit，触发小红书发布。
- 用 Chrome DevTools → Rendering → “Layer Borders” 观察：抖动时若看到大量绿色闪烁图层，就是过度分层信号
-
backface-visibility: hidden是更轻量的替代方案，它触发合成但不改变定位上下文，兼容 IE10+ - 现代项目中，
will-change: transform应只在 JS 动画开始前设置，并在animationend回调里立刻清除，长期挂载会增加内存压力
IE6/7 的双边距 Bug 也会表现为“抖动”
在 IE6 中，float: left 元素若同时有 margin-left，实际渲染间距是声明值的两倍——这在快速切换状态（如 hover→active）时，会让人误判为“位置跳变”。它和现代浏览器的合成抖动机制完全不同，但现象相似。
- 修复只需在该元素上加
_display: inline（注意下划线前缀，仅 IE6 识别） - 不要全局应用；只加在实际出现双倍 margin 的元素上
- 若项目已放弃 IE6 支持，这段代码可直接删除——它不是“优化”，而是历史补丁
真正容易被忽略的是：抖动往往不是单点问题，而是浮动+弹性布局+滚动锚定三者叠加后，浏览器在 layout/paint/composite 阶段失去同步节奏的结果。与其升级渲染模式，不如先确认浮动是否仍是必要手段——99% 的场景下，display: flex 或 display: grid 能从根上绕过所有这些陷阱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
