javascript - iOS 上的全屏 元素 : glitch on scroll

Question

我有一个<canvas>具有此 CSS 的元素:

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

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

Here is a video 。请注意，我将 Canvas 全部涂成黑色以使要点更加清晰。通常 Canvas 不仅仅是黑色的。请注意本地址栏隐藏时如何在底部看到下面的内容。

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

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

这是一个demo显示问题。在这个演示中， Canvas 不是黑色的，而是背景中颜色不稳定的东西。

有什么建议吗？

Answer 1

我解决了

• 使 Canvas 高于视口(viewport)
• 添加了奇妙的 -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;
}