Chrome和Safari渲染差异源于内核机制不同：WebKit对色彩空间、合成层更激进，Blink更保守。须分场景处理——用modern-normalize统一基础样式，color(srgb)显式声明色彩空间，禁用触发合成层的属性（如opacity:0.99、filter），sticky外层加isolation:isolate，并用@supports精准检测特性支持。
Chrome 和 Safari 渲染同一段 CSS 出现错位、颜色偏移、文字模糊或 sticky 失效，不是你写错了，而是两者底层机制差异被放大——WebKit 对色彩空间、合成层、新特性解析更激进，Blink 更保守但兼容性策略不同。必须分场景针对性处理，不能靠“加个前缀”或“全局重置”糊弄过去。
用 modern-normalize 替代 normalize.css（现代项目首选）
normalize.css 面向全浏览器历史版本，而 modern-normalize 专为 Chrome 100+、Safari 15.4+、Firefox 110+ 设计，体积小 40%，且主动剔除对旧特性（如 IE 表单 hack）的兼容逻辑，避免干扰现代渲染路径。
- 安装：
npm install modern-normalize，然后在入口 CSS 最顶部@import "modern-normalize"; - 它默认启用
* { box-sizing: border-box; }，无需额外声明 - 对
button、input[type="search"]、textarea的垂直对齐做了 WebKit/Blink 统一校准，比 normalize.css 更贴近当前 Safari 行为 - 不兼容 IE 或 iOS 14 以下设备；若需支持，改用 normalize.css 并确保它在所有自定义样式之前
color() 显式声明 sRGB 色彩空间（解决 #FF6B6B 偏色）
Safari macOS/iOS 默认将未声明色彩空间的颜色映射到 Display P3，Chrome 严格走 sRGB，结果同一 #FF6B6B 在 Safari 看起来更粉、Chrome 更橙。这不是 bug，是规范允许的行为差异。
- 关键写法：
background-color: #FF6B6B; background-color: color(srgb 1 0.4196 0.4196);（注意 fallback 必须前置） - 十六进制和
rgb()全部隐式绑定 sRGB，但无法阻止 Safari 的 P3 映射；color(srgb)是目前唯一能绕过系统策略的 CSS 原生方案 - Chrome 111+、Safari 16.4+、Firefox 117+ 支持；旧版直接忽略第二行，退回到
#FF6B6B - 别用
color(display-p3)作主色——它会让 sRGB 屏幕过饱和，且无有效 fallback
避开 Safari 的合成层陷阱（文字模糊、sticky 失效）
Safari 对 transform、opacity、filter 触发合成层更敏感，一旦文字进入 GPU 图层，亚像素渲染失效，边缘立刻发虚；position: sticky 在嵌套滚动容器中也常因图层提升失败。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
- 禁用
opacity: 0.99这类“伪全透明”，改用opacity: 1或visibility: hidden -
filter: blur(0)或filter: brightness(1)一律删除——只要声明 filter，Safari 就升层 - 文字动效优先用
color、font-size、text-shadow过渡，它们不触发图层 -
sticky元素外层加isolation: isolate，阻断父级 transform/filter 向下穿透
@supports 检测代替 UA 判断（精准启用新特性）
靠 navigator.userAgent 或 matchMedia('(color-gamut: p3)') 判断 Safari 是否支持某特性，极不可靠：同一台 Mac 上，Safari 可能启 P3 映射，Chrome 仍走 sRGB；系统设置、启动参数都会动态影响。
- 写
@supports (color: color(srgb 0 0 0)) { ... }，比判断 Safari 版本更可信 - Grid 布局必须包裹在
@supports (display: grid)中，并配@supports not (display: grid)回退到 Flex - 慎用
-webkit-backdrop-filter：Safari 16.4+ 已支持标准backdrop-filter，加前缀反而可能被忽略 - 不要在 JS 中用
getComputedStyle(el).getPropertyValue('gap')判断 gap 支持——返回空字符串不代表不支持，可能是未生效
最易被忽略的是：modern-normalize 和 color(srgb) 必须配合 meta name="color-scheme" 使用，否则 iOS Safari 可能强制深色滤镜导致色偏加剧；而合成层问题往往藏在看似无关的父级 will-change 或 transform-style: preserve-3d 里，得开 DevTools 的 Layers 面板逐层确认。
