跳到主要内容

Chromium-Gecko-WebKit差异清单

版本数字会过期。下表只记 会踩的机制,落地以构建当天 Chrome / Edge / Firefox / Safari / iOS Safari 实测为准。探测写 detectGpuCaps(),不要 if (safari && version < …)

WebGPU 平台面见 适配与降级。Canvas 2D hint 差异见 Canvas 07

1. 预乘 alpha

WebGL premultipliedAlpha 默认 true:合成到页里时,drawing buffer 当预乘。片元若输出直通 alpha(straight),边缘黑边 / 白边。关掉预乘或 shader 里 rgb *= a,两套里选一套,和 CSS 叠层对拍。

项目ChromiumGeckoWebKit
默认预乘与 DOM 合成跟规范默认跟规范;与 CSS 叠半透明时历史边角多,必须对拍同;WKWebView 更易和底色不一致
alpha: false不透到 DOM,少一层混合
WebGPU alphaMode"premultiplied" / "opaque"跟版本;与 GL 默认要对齐产品选项Safari 26 起;不要假设和 GL 同一套默认

共同:从 Canvas 2D drawImage 进 GL 纹理,2D 表面已是预乘。UNPACK_PREMULTIPLY_ALPHA_WEBGL 再乘一次会发脏。导出 PNG 当直通 alpha 时要拆预乘,见 08。

2. lose context

项目ChromiumGeckoWebKit
webglcontextlost 频率驱动重置、GPU 进程崩相对少;仍要恢复路径iOS 最勤:内存、切 App、系统回收
preventDefault往往无 restored同;表现为回来白屏
WEBGL_lose_context有,QA 必跑有;真机丢失仍要测,扩展测的是路径不是频率
restored 后扩展对象全部作废,重 getExtension

共同:丢失后 program / buffer / VAO 全部 无效。资源表见 04

3. WebGPU 平台洞(2026-08)

平台状态
Chrome / Edge 桌面可用,当 WebGPU 主验证面
Safari 26 / iOS 26可用;feature / limits 比桌面 Chrome 窄,compute / 压缩格式要探测
Firefox Windows可用
Firefox macOS Apple Silicon可用
Firefox Linux不完整requestAdapter() 当可 null
Firefox Android不完整
Android Chrome跟版本与 GPU;不能 用桌面 Chrome 号推断
非安全上下文全引擎无 navigator.gpu

共同:navigator.gpu 存在 ≠ adapter 非 null ≠ requestDevice 成功。失败降 WebGL2。

4. ANGLE 与着色器后端

引擎典型后端
ChromiumANGLE(Windows D3D11/D3D12/Vulkan,其它平台 Vulkan/Metal/GL)
Gecko(Windows)也走 ANGLE 一类转换;Linux 常更贴原生 GL,行为不要当 Chrome 克隆
WebKitMetal;GLSL ES → Metal 翻译

后果(会踩,不穷举 API):

  • 同一 GLSL 桌面过、iOS 编译失败:精度、循环、非 const 索引、扩展宏。
  • MAX_* 在 ANGLE 上是 翻译后的 caps,不是「显卡宣传值」。
  • 点精灵 / 宽线等桌面 GL 习惯 不要 当 WebGL 可移植。
  • 调试:Chrome chrome://gpu 看 ANGLE 后端;Safari 无对等页,靠真机 log。

failIfMajorPerformanceCaveat 在软件 SwiftShader / 类似路径上让 getContext 失败。Gecko / WebKit 的 caveat 判定不完全同词,但软件回退都要自己降级,不要假设三引擎同一条软件实现。

5. 怎么维护

业务只认 detectGpuCaps() + 浮点 / 压缩 / adapter 探测。本表解释 为什么 iOS 丢上下文、为什么 Firefox Linux 没有 WebGPU、为什么预乘只在叠 DOM 时炸。Android WebView 随厂商内核,单独进测试矩阵。

失败形态

症状原因
半透明贴图黑边,只在叠 CSS 时出现直通 alpha 当预乘合成
只在 iPhone 切回白屏lost 未 restore / 未 preventDefault
Firefox Linux 示例直接 throw把 adapter null 当异常
Shader 只在 Safari 挂Metal 翻译 + precision,未真机编
桌面 8k 纹理、手机黑caps 抄了 ANGLE 桌面值

权威资料

核对日期:2026-08-26