使用noscrollbars.css时z-index设为-1导致Chrome中p5.easycam.js失效

问题现象 #

我想要实现全屏canvas无滚动条的效果，canvas.style('z-index', '-1'); 搭配noscrollbars.css使用时在火狐浏览器中运行正常，但在Chrome浏览器中会导致p5.easycam.js失效，控制台没有报错，最初猜测可能和node.js有关。

相关代码 #

页面HTML代码 #

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="noscrollbars.css">
  <head>
    <meta charset="UTF-8" />
    <script src="p5.js"></script>
    <script src="myscript.js"></script>
    <script src="p5.easycam.min.js"></script>
  </head>
  <body>
    <main> </main>
  </body>
</html>

noscrollbars.css代码 #

html, body {
  height: 100%;
}
body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

myscript.js代码（感谢Paul Wheeler指出原问题中的错误） #

var canvas;

var easycam;
let CamState = { distance: 2000, center: [0,0,0], rotation: [1,0,0,0]};

function setup() {
  canvas = createCanvas(windowWidth, windowHeight, WEBGL);
  canvas.position(0, 0);
  canvas.style('z-index', '-1');

  fill(255, 64, 0);

  easycam = createEasyCam();
  easycam.setViewport([0, 0, windowWidth, windowHeight]);
}

function draw() {
  background(0);

  ambientLight(100, 100, 100);
  pointLight(255, 255, 255, -100, -100, 100);
  directionalLight(100, 100, 100, -1, 0.1, 0.8);
  box(150);
}

解决方案 #

发布问题后测试发现将z-index设置为0即可正常运行，推测该问题是Chrome中多个canvas图层和编写的CSS规则不匹配导致，后续会进一步学习相关知识。

内容的提问来源于stack exchange，提问作者cubesareneat