iOS上的全屏<canvas>元素：滚动时出现小故障

Question

我有一个<canvas>元素与这个CSS：

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

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

Here is a video。请注意，我将画布全部涂成黑色以使点更清晰。通常画布不仅仅是黑色。请注意地址栏隐藏时底部的内容如何显示在底部。

当然我试图使画布高于100％，但这没有效果。即使我将高度设置为1000px（并在控制台上确认$('canvas').height()返回1000），也会发生同样的事情。就好像canvas元素没有渲染到视口之外。

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

这是显示问题的demo。在这个演示中画布不是黑色的，它是背景中摇晃的颜色。

有什么建议吗？

Answer 1

我通过

解决了这个问题

• 使画布高于视口
• 添加奇妙的hacky -webkit-transform: 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;
}