Javascript 全屏<；帆布>；iOS上的元素：滚动时出现故障

我有一个带有此CSS的

元素：

canvas[resize] {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0; top: 0;
  pointer-events: none;
  background: black;
}

我在网站上显示实际内容背后有趣的东西。在iOs上，地址栏隐藏在滚动条上。当它隐藏时，画布不会再填充整个高度一秒钟左右，这很难看

。请注意，我将画布全部涂成黑色，以使点更清晰。通常画布不仅仅是黑色的。请注意，当地址栏隐藏时，如何在底部看到下面的内容

当然，我试图使画布高于100%，但这没有效果。即使我将高度设置为1000px（并在控制台上确认

$（'canvas'）。height（）

返回1000），同样的情况也会发生。就好像画布元素没有在视口外渲染一样

我读了一些关于如何强制隐藏/显示地址栏以便不发生转换的文章，但似乎所有的方法都过时了。当然，我不想影响地址栏的行为

下面是一个显示问题的示例。在这个演示中，画布不是黑色的，而是背景中颜色不稳定的东西

有什么建议吗？

我通过

• 使画布高于视口
• 添加奇妙的hacky

  -webkit转换：translate3d（0,0,0）

现在看起来是这样的：

canvas[resize] {
  -webkit-transform: translate3d(0, 0, 0);
  width: 100%;
  height: 115%; // Higher than the viewport
  position: fixed;
  left: 0; top: 0;
  pointer-events: none;
  background: black;
}

我用计算机解决了它

• 使画布高于视口
• 添加奇妙的hacky

  -webkit转换：translate3d（0,0,0）

现在看起来是这样的：

canvas[resize] {
  -webkit-transform: translate3d(0, 0, 0);
  width: 100%;
  height: 115%; // Higher than the viewport
  position: fixed;
  left: 0; top: 0;
  pointer-events: none;
  background: black;
}

---

这不仅是在ios上，我也可以通过调整桌面浏览器的大小看到这一点，如果没有任何相关代码（我不会深入挖掘您页面的源代码），我将无法帮助您使用什么桌面浏览器？除了上面的CSS，您还需要什么代码？我在JS中测试了这个问题，但没有发生任何事情，这就是为什么我确信这不是JS问题。这不仅在ios上，我也可以通过调整桌面浏览器的大小看到这一点，并且没有任何相关代码（我不会深入挖掘您页面的源代码），我无法帮助您使用什么桌面浏览器？除了上面的CSS，您还需要什么代码？我测试了这个问题，JS中没有发生任何事情，这就是为什么我相信它不是JS问题。