iOS Safari中全屏固定定位Canvas的WebGL多场景渲染异常问题求助

大家好，我最近遇到一个WebGL渲染的兼容性问题：桌面端一切正常，但在iOS Safari上，用单个全屏固定Canvas通过裁剪区域渲染到多个div对应位置时，画面会出现滞后、显示错位等异常情况。以下是我的完整代码，希望能帮我分析问题所在并给出解决办法。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
#main-canvas{
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
}
.canvas{
  width: 700px;
  height: 500px;
  border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="main-canvas"></canvas>
<div class="canvas" id="canvas-1"></div><br><br>
<div class="canvas" id="canvas-2"></div><br><br>
<div class="canvas" id="canvas-3"></div><br><br>
<div class="canvas" id="canvas-4"></div><br><br>
<script type="text/javascript">
let main_canvas = document.getElementById("main-canvas");
function resize_event(){
  main_canvas.width = window.innerWidth;
  main_canvas.height = window.innerHeight;
}
resize_event();
window.addEventListener("resize", () => resize_event());

let gl = main_canvas.getContext("webgl2");
let colors = [
  [1, 0, 0, 1],
  [0, 1, 0, 1],
  [0, 0, 1, 1],
  [1, 1, 0, 1]
];

function update(){
  gl.enable(gl.SCISSOR_TEST);
  gl.viewport(0, 0, main_canvas.width, main_canvas.height);
  gl.clearColor(0, 0, 0, 0);
  gl.clear(gl.COLOR_BUFFER_BIT);

  let main_canvas_rect = gl.canvas.getBoundingClientRect();
  for (let i = 1; i <= 4; i++) {
    let canvas = document.getElementById("canvas-" + i);
    let rect = canvas.getBoundingClientRect();

    gl.scissor(
      rect.left,
      main_canvas_rect.height - rect.top - rect.height,
      rect.width,
      rect.height
    );
    gl.viewport(
      rect.left,
      main_canvas_rect.height - rect.top - rect.height,
      rect.width,
      rect.height
    );
    gl.clearColor(
      colors[i - 1][0],
      colors[i - 1][1],
      colors[i - 1][2],
      colors[i - 1][3]
    );
    gl.clear(gl.COLOR_BUFFER_BIT);
  }
  requestAnimationFrame(update);
}
requestAnimationFrame(update);
</script>
</body>
</html>

问题分析 #

iOS Safari在处理固定定位元素、Canvas渲染和页面合成时，有一些和桌面浏览器不同的特性，可能的诱因包括：

1. 设备像素比（DPR）未适配：iOS设备的DPR普遍大于1，直接用window.innerWidth/innerHeight设置Canvas尺寸，会导致渲染坐标和实际div位置不匹配
2. 坐标计算的子像素问题：iOS Safari对子像素坐标的渲染处理差异，可能导致裁剪区域偏移
3. 合成层策略差异：固定定位的Canvas在iOS上可能未被放入独立合成层，导致和页面其他元素的合成不同步，出现滞后
4. getBoundingClientRect()的准确性：iOS Safari在视口缩放、滚动时，该方法的返回值可能存在延迟或偏差

针对性解决方案 #

1. 适配设备像素比（核心修复）

这是iOS上Canvas渲染异常最常见的原因，需要根据设备DPR调整Canvas的实际像素尺寸和渲染坐标：

const dpr = window.devicePixelRatio || 1;

function resize_event(){
  // 设置Canvas的实际像素尺寸
  main_canvas.width = Math.round(window.innerWidth * dpr);
  main_canvas.height = Math.round(window.innerHeight * dpr);
  // 保持Canvas的视觉尺寸和窗口一致
  main_canvas.style.width = `${window.innerWidth}px`;
  main_canvas.style.height = `${window.innerHeight}px`;
}

同时，在计算裁剪区域和视口时，要将div的CSS坐标转换为设备像素：

// 在update循环的for中修改坐标计算逻辑
let rect = canvas_div.getBoundingClientRect();
// 转换为设备像素并取整，避免子像素偏差
const scaledLeft = Math.round(rect.left * dpr);
const scaledTop = Math.round(rect.top * dpr);
const scaledWidth = Math.round(rect.width * dpr);
const scaledHeight = Math.round(rect.height * dpr);

gl.scissor(
  scaledLeft,
  main_canvas.height - scaledTop - scaledHeight, // 直接用Canvas的实际高度，无需再取DOM rect
  scaledWidth,
  scaledHeight
);
gl.viewport(
  scaledLeft,
  main_canvas.height - scaledTop - scaledHeight,
  scaledWidth,
  scaledHeight
);

2. 优化合成层策略

给固定定位的Canvas添加will-change属性，强制iOS Safari将其放入独立合成层，避免和页面其他元素的合成冲突：

#main-canvas{
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  will-change: transform; /* 触发独立合成层 */
}

3. 优化渲染循环

• 避免在渲染循环中重复获取main_canvas_rect，直接使用Canvas的实际像素高度即可
• 对坐标取整，消除子像素渲染带来的模糊或偏移
• 确保每帧的scissor和viewport设置完全同步

修改后的完整update函数：

function update(){
  gl.enable(gl.SCISSOR_TEST);
  const scaledCanvasWidth = main_canvas.width;
  const scaledCanvasHeight = main_canvas.height;

  // 先清空整个Canvas
  gl.viewport(0, 0, scaledCanvasWidth, scaledCanvasHeight);
  gl.scissor(0, 0, scaledCanvasWidth, scaledCanvasHeight);
  gl.clearColor(0, 0, 0, 0);
  gl.clear(gl.COLOR_BUFFER_BIT);

  const dpr = window.devicePixelRatio || 1;
  for (let i = 1; i <= 4; i++) {
    let canvas_div = document.getElementById("canvas-" + i);
    let rect = canvas_div.getBoundingClientRect();
    
    const scaledLeft = Math.round(rect.left * dpr);
    const scaledTop = Math.round(rect.top * dpr);
    const scaledWidth = Math.round(rect.width * dpr);
    const scaledHeight = Math.round(rect.height * dpr);

    gl.scissor(
      scaledLeft,
      scaledCanvasHeight - scaledTop - scaledHeight,
      scaledWidth,
      scaledHeight
    );
    gl.viewport(
      scaledLeft,
      scaledCanvasHeight - scaledTop - scaledHeight,
      scaledWidth,
      scaledHeight
    );
    gl.clearColor(
      colors[i - 1][0],
      colors[i - 1][1],
      colors[i - 1][2],
      colors[i - 1][3]
    );
    gl.clear(gl.COLOR_BUFFER_BIT);
  }
  requestAnimationFrame(update);
}

4. 滚动事件同步（可选）

如果页面存在滚动，iOS Safari的getBoundingClientRect()在滚动时可能有延迟，可监听滚动事件标记需要更新：

let needsSync = false;
window.addEventListener('scroll', () => {
  needsSync = true;
});

在渲染循环中，若needsSync为true，可强制触发一次坐标同步（不过requestAnimationFrame本身会在每帧触发，多数情况下无需额外处理）。

以上方案优先推荐从适配设备像素比开始尝试，这是解决iOS上Canvas渲染偏移/滞后的最核心步骤。

内容来源于stack exchange