根本原因是浏览器底层渲染引擎、WebGL实现、CSS逻辑及DPR处理差异；需分层排查：检查WebGL上下文并降级兼容、按DPR设置canvas物理尺寸、统一鼠标坐标计算、适配着色器精度与语法。
游戏画面在不同浏览器显示不同，根本原因不是“浏览器故意不兼容”，而是底层渲染引擎、WebGL 实现细节、CSS 渲染逻辑、甚至默认字体/缩放策略存在差异。直接改 CSS 或加个 transform: translateZ(0) 很难根治，得从渲染路径上分层排查。
WebGL 上下文创建失败或降级到 Canvas 2D
部分浏览器（如旧版 Safari、某些 iOS WebView）对 webgl2 支持不完整，getContext('webgl2') 返回 null，但代码未 fallback 到 webgl 或报错静默，导致渲染器用 Canvas 2D 模拟——画质、性能、着色器行为全崩。
- 必须显式检查上下文：用
gl = canvas.getContext('webgl2') || canvas.getContext('webgl')，再判断gl是否为null - Safari 15.4+ 才默认开启
webgl2，iOS 15.4 以下只能用webgl；若用OES_texture_float等扩展，需用gl.getExtension()动态检测，不能假设存在 - 避免硬编码
gl.UNSIGNED_INT类型——Safari WebGL 1 不支持，得降级为gl.UNSIGNED_SHORT并重生成索引缓冲
CSS 缩放与 DPR（设备像素比）处理不一致
Chrome/Firefox 默认按 window.devicePixelRatio 自动缩放 canvas 像素，Safari（尤其 macOS）常忽略该值，导致同一 canvas 在高 DPI 屏幕上模糊或错位；加上用户手动缩放页面（Ctrl +），getBoundingClientRect() 返回值和实际渲染坐标就对不上。
- canvas 的
width/height属性必须设为物理像素：例如canvas.width = canvas.clientWidth * window.devicePixelRatio - CSS 中禁止用
zoom或transform: scale()缩放 canvas 元素本身，改用style.width/style.height控制显示尺寸 - 鼠标坐标转换时，统一用
canvas.getBoundingClientRect()+event.clientX/Y计算，别依赖offsetX/Y（Firefox 不支持）
着色器语法与精度限定符兼容性问题
GLSL ES 1.0（WebGL 1）和 3.0（WebGL 2）对 precision、for 循环条件、texture2D vs texture 的要求不同；Chrome 可能宽容解析，Safari 则直接编译失败，报 ERROR: 0:7: 'highp' : precision is not supported in fragment shader 这类错误。
- WebGL 1 着色器开头必须写
precision mediump float;，不能省略或写highp（移动端多数不支持） - 避免在 fragment shader 中对
highp采样器做运算；若需高精度，改用mediump采样 + CPU 端预处理 - 用
#version 300 es的 WebGL 2 着色器，函数名必须是texture()而非texture2D()，且main()返回void，输出变量要声明为out vec4 fragColor
真正难处理的不是某一行代码，而是多个层叠因素：WebGL 初始化失败 → 回退到 Canvas 2D → 但 Canvas 2D 的 imageSmoothingEnabled 在 Safari 默认为 true，Chrome 为 false → 再叠加 DPR 计算偏差 → 最终角色边缘发虚、UI 文字锯齿、粒子位置偏移。每个环节都得单独验证，不能只看“画面出来了”就认为 OK。
