webkit引擎在微信、ios及部分安卓webview中存在显著渲染差异，需避免深度嵌套选择器、慎用:not()多参数和:focus-within，动画须显式声明will-change，backdrop-filter兼容性差，滚动与输入框行为受系统版本影响大。
因为你的H5页面在微信、iOS WebView、部分安卓WebView里跑的，底层都是Webkit或其变种（比如WKWebView、旧版Android WebKit），而它们对CSS的解析、渲染和性能策略跟标准Chromium/Gecko有实质性差异——不是“差不多”，是“行为不一致”。
Webkit对CSS选择器的匹配逻辑更严格
Webkit会提前终止某些复杂选择器的匹配，尤其在深度嵌套或使用:not()、:has()等现代伪类时。例如：.container div ul li a:hover在Safari 16+可能被降级处理，而Chrome 120+仍能完整匹配。
- 避免写超过3层嵌套的选择器，改用语义化class名（如
.nav-link代替.header nav ul li a） -
:not()只支持单个简单参数，:not(.active, .disabled)在旧版Webkit中会直接失效，得拆成两个规则 - 慎用
:focus-within，iOS 15.4之前它不触发重绘，导致焦点样式“卡住”
Webkit的硬件加速触发条件更苛刻
同样是transform: translateZ(0)，在Webkit里必须配合will-change: transform或明确的transform值才能稳定创建复合图层；光写translateZ(0)在iOS 16.5上可能被忽略。
- 动画元素务必显式声明
will-change: transform，且仅在需要时添加/移除，避免长期占用GPU内存 -
opacity变化不一定会触发硬件加速，Webkit更倾向用transform替代opacity做淡入淡出 - 慎用
backdrop-filter：iOS 15.4+才支持，且开启后会强制创建新图层，叠加过多会导致内存飙升
Webkit的滚动与缩放行为不可绕过
微信和iOS WebView默认禁用双指缩放，但用户调大系统字体后，rem单位会失准；同时，原生滚动惯性、回弹效果、固定定位吸附都由Webkit控制，JS无法完全接管。
- 全局加
text-size-adjust: 100%只能防iOS，微信需额外加-webkit-text-size-adjust: 100%，且必须带!important -
-webkit-overflow-scrolling: touch在iOS 16+已废弃，但不加它，长列表滚动仍会卡顿——目前仍需保留并配合overscroll-behavior: contain - 输入框聚焦时，Webkit可能把
position: fixed元素顶出视口，不能只靠window.scrollTo()修复，得监听resize事件+延迟重置scrollTop
最麻烦的不是某条CSS不生效，而是同一条规则在iOS Safari、微信、钉钉、飞书里表现各不相同——它们用的都是Webkit，但版本、补丁、定制策略全不一样。你得把Webkit当一个“家族”，而不是一个“引擎”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
