动画导致 overflow-x: hidden 失效，主因是 transform/will-change 强制 GPU 加速使元素脱离文档流、width 百分比插值误差、Safari 的 will-change 渲染异常及 SVG/iframe 裁剪失效。
动画触发了 overflow-x: hidden 失效
很多情况下，页面突然出现横向滚动条抖动，并不是因为内容真超宽，而是 CSS 动画（尤其是 transform、opacity 或 filter）让浏览器重绘逻辑异常，导致父容器的 overflow-x: hidden 被绕过或临时失效。
常见诱因是给元素加了 transform: translateZ(0) 或 will-change: transform 强制 GPU 加速——这会让该元素脱离普通文档流，其渲染边界可能意外撑开视口宽度。
- 检查所有带
animation或transition的元素，特别是设置了transform的，临时注释掉看滚动条是否消失 - 确认父容器是否同时设置了
overflow-x: hidden和overflow-y: auto——这种组合在某些浏览器（如 Safari 16+）中容易因层叠上下文错乱而失效 - 避免对
body或html直接设overflow-x: hidden；改用包裹一层.app-container并对其设限
动画中 width / max-width 计算被干扰
当动画涉及 width、max-width、padding 等影响盒模型的属性时，浏览器在帧间插值过程中可能短暂计算出非整数像素值（如 width: 99.998px），结合 subpixel 渲染和缩放，会意外触发横向溢出。
尤其在使用 @keyframes + % 百分比单位时，如果起始/结束值不严格对齐容器尺寸，中间帧就容易“漂移”。
立即学习“前端免费学习笔记（深入）”；
- 优先用
transform: scaleX()替代width动画，它不触发布局（layout），只走合成层 - 若必须用
width，确保关键帧值都是整数（比如width: 100px→width: 200px），避免width: 50%这类依赖运行时计算的写法 - 在动画元素上加
transform: translateZ(0)有时反而加重问题——先去掉试试
Safari 下 will-change 导致 layout 错乱
Safari（特别是 macOS Ventura / iOS 16+）对 will-change 的实现较激进：一旦声明，浏览器会提前创建独立图层，但若该图层尺寸估算错误（例如未考虑边框、滚动条宽度或缩放），就会在动画过程中反复调整，造成横向滚动条闪现。
错误现象典型表现为：滚动条只在动画播放时出现，暂停即消失；DevTools 中看到 body 宽度偶尔变成 100vw + 17px（滚动条宽度）。
- 删掉所有
will-change: transform、will-change: opacity等声明，用transform: translateZ(0)替代（更可控） - 如果必须用
will-change，只在动画开始前 JS 动态添加，动画结束后立刻移除：el.style.willChange = 'transform'; setTimeout(() => { el.style.willChange = 'auto'; }, 300); - 检查是否在
:hover伪类里写了will-change——这种写法极易引发 Safari 持续误判
动画元素包含内联 SVG 或 iframe
SVG 元素默认有 overflow: visible，且不响应父级 overflow-x: hidden；iframe 则自带不可见的滚动机制。当它们被加入动画流程（比如 opacity 淡入、scale 缩放），浏览器可能临时扩大其绘制区域，从而撑开整个页面宽度。
这类问题在 Chrome 115+ 和 Edge 116 后更明显，因底层渲染管线对嵌入内容的裁剪策略变严格。
- 给 SVG 容器显式加
overflow: hidden，并确保其父级也设了overflow-x: hidden - iframe 加
sandbox属性后，再加style="width: 100%; height: auto; border: none;"，避免默认滚动行为干扰 - 用
clip-path: inset(0)强制裁剪动画中的 SVG/iframe（兼容性 ok，Chrome/Safari/Firefox 均支持）
