删掉 -webkit-overflow-scrolling: touch、加 text-size-adjust: none、用 modern-normalize 替代 normalize.css、补 color(srgb) fallback，四步可解决90%移动端CSS渲染不一致问题。
直接删掉 -webkit-overflow-scrolling: touch，加 text-size-adjust: none，用 modern-normalize 替代 normalize.css，再把所有颜色声明补上 color(srgb) fallback —— 这四步做完，90% 的移动端 CSS 渲染不一致问题就消失了。
为什么 -webkit-overflow-scrolling 必须删除
它在 iOS 13+ 和 Chrome 63+ 中已被废弃，但保留后不会“没效果”，而是强制启用旧滚动引擎，导致惯性失效、scrollTop 不更新、touchmove 被阻塞，甚至内存泄漏。DevTools 里看到它，就该立刻删。
- 滚动容器必须有明确高度（
height或max-height），否则会退化为重排驱动滚动，帧率跌破 30fps - 避免父级同时设
border-radius和overflow: hidden，这是 iOS 上的“双重封印”，会裁剪阴影和渐变边缘 - 滚动监听器必须加
{ passive: true }，否则哪怕空函数也会让 iOS Safari 掉帧
text-size-adjust: none 是唯一可靠解法
Android Chrome 会基于内容启发式算法自动放大文字（尤其当行宽窄、字体小、位于 <footer> 等区域时），这不是 bug，是可访问性策略。DevTools 模拟器里看不到，真机上才暴露。
- 必须写在全局 CSS 最顶部，且作用于
html或body，不能只加在某个 class 里 - 配合
font-size: 16px显式设置表单控件字体，防止 iOS Safari 对<input>单独缩放 - 别依赖
@media (hover: hover)判断设备类型——它只反映能力，不解决渲染偏差
modern-normalize + color(srgb) 是现代项目基础配置
modern-normalize 专为 Chrome 100+、Safari 15.4+、Firefox 110+ 设计，体积小 40%，且剔除了对 IE 等旧特性的兼容逻辑，避免干扰现代渲染路径；color(srgb) 则是绕过 Safari 默认 P3 映射的唯一原生方案。
立即学习“前端免费学习笔记（深入）”；
- 安装后在入口 CSS 最顶部
@import "modern-normalize";，它默认启用* { box-sizing: border-box; } - 十六进制色值如
#FF6B6B在 Safari 会被映射到 Display P3，必须写成：background-color: #FF6B6B; background-color: color(srgb 1 0.4196 0.4196); - 别用
color(display-p3)作主色——sRGB 屏幕会过饱和，且无有效 fallback
box-shadow 和渐变锯齿要从合成层入手
iOS Safari 对未触发合成层的元素，会跳过 box-shadow 渲染或模糊边缘；渐变+动画时锯齿更明显，根源是 WebKit 走了低精度 CPU 渲染路径。
- 给带阴影/渐变的元素加
transform: translateZ(0)+will-change: transform，二者缺一不可 - Tailwind 的
shadow-[...]在 Safari 15.4 前解析严格：必须显式写出inset的第四个参数（如0），禁用多层逗号分隔写法 - 高 DPR 下，
blur-radius推荐 ≤4px，rgba(0,0,0,0.08)视觉浓度 ≈ DPR=1 下的 0.12，别盲目调高透明度
真正容易被忽略的是：这些修复不是孤立生效的。比如删了 -webkit-overflow-scrolling 却没设滚动容器高度，或者加了 text-size-adjust: none 但表单控件字体仍小于 16px，问题照样出现。每一步都得落在具体属性和具体上下文里，不能靠“全局重置”糊弄过去。
