安卓微信X5内核禁用marquee、裁剪scrollIntoView、白屏风险及scroll节流，应改用requestAnimationFrame+transform、IntersectionObserver等兼容方案。
滚动文字在安卓微信里卡顿或直接不滚动
安卓微信内置的 X5 内核对 marquee 标签做了激进优化，多数情况下会直接禁用渲染，或强制降帧到 1fps —— 不是你的 CSS 写错了，是它压根不走标准流程。
常见现象：marquee 在 Chrome 桌面/Android 浏览器正常，但在微信内静止、闪一下就停、文字错位、甚至触发白屏；scrollLeft 动画也常被 X5 的“内存省电策略”中途掐断。
- 别依赖
marquee：HTML5 已将其标记为过时（obsolete），X5 仅保留基础解析，无事件支持、无样式继承保障 - 改用
requestAnimationFrame+transform: translateX()手动驱动，绕过 X5 对scroll类 API 的拦截 - 必须加
will-change: transform，否则 X5 可能拒绝启用 GPU 加速，动画仍掉帧
安卓微信里 scrollIntoView 失效或跳转错位
微信 8.0.32+ 对 scrollIntoView 做了 viewport 裁剪限制：若目标元素超出当前视口 2 倍高度，就会静默失败，不报错也不滚动。
典型场景：长列表页点击锚点跳转、表单错误定位、Tab 切换后自动滚动到内容区 —— 在微信里经常“点了没反应”，但调试器里 element.offsetTop 明明有值。
立即学习“前端免费学习笔记（深入）”；
- 不用
{ behavior: 'smooth' }：X5 不支持该参数，会退化成auto，且仍有裁剪问题 - 改用
element.scrollIntoView({ block: 'start', inline: 'nearest' })，并确保父容器overflow-y不为hidden - 如果目标在动态加载内容中（如 Vue
v-if或 ReactuseState），需在 DOM 渲染完成后再调用，推荐用setTimeout(fn, 0)或queueMicrotask
强制启用 GPU 加速却触发微信白屏
为解决滚动卡顿，不少人会给滚动容器加 transform: translateZ(0) 或 backface-visibility: hidden，但在安卓微信某些版本（尤其是 8.0.28–8.0.35）会导致整个 WebView 白屏或闪烁。
根本原因：X5 内核在低端机上对合成层（compositing layer）管理极差，强行创建图层会挤占纹理内存，触发回退机制。
- 只对「明确需要滚动」的容器加加速，避免全局
* { transform: translateZ(0) } - 优先用
will-change: scroll-position替代translateZ(0)，X5 对前者兼容性更好 - 加完后务必在真机（特别是红米/荣耀中端机型）测试白屏率，出现即删，别硬扛
监听滚动事件在微信里延迟高达 300ms
scroll 事件在安卓微信中默认被节流，实际触发间隔约 200–400ms，比桌面 Chrome 慢 5 倍以上 —— 导致吸顶导航延迟、滚动进度条跳变、懒加载图片错过时机。
这不是事件绑定问题，是 X5 主动合并了 scroll tick，且不暴露控制开关。
- 不要用
addEventListener('scroll', handler)做实时响应逻辑，比如“滚动 50% 显示按钮” - 改用
IntersectionObserver监听元素进出视口，它在 X5 中触发及时、无节流 - 若必须读取
window.scrollY，用requestAnimationFrame包一层，至少保证每帧读一次，而非等事件
最麻烦的不是技术方案，而是微信不同版本对同一段代码的行为差异 —— 8.0.30 和 8.0.36 对 will-change 的处理可能完全相反。上线前必须用“微信开发者工具 + 真机覆盖”双验证，别信模拟器。
