css - Chrome 中奇怪的 Canvas 渲染错误

Question

我正在使用 Canvas 渲染图像，但有时会遇到这种奇怪的图形错误，一旦我滚动它就会消失。

这是 react 组件的一部分，you can see the code for it here.

在渲染过程中滚动或触发某种更新后，它看起来应该是这样的:

我的图片的 CSS 是这样的:

.async-image {
  position: relative;
  z-index: 1;
  background: black;
  overflow: hidden;
  transform: translateZ(0)
}

.async-image canvas {
  pointer-events: none;
  opacity: 0;
  transform: translateZ(0)
}

.async-image .preload {
  position: absolute;
  transform: scale(1.2);
}

.async-image .preload.ready {
  opacity: 1;
}

.async-image .src {
  position: absolute;
  transform: scale(1.1);
}

.async-image .src.ready {
  opacity: 1;
  transform: scale(1);
}

.async-image img {
  opacity: 0;
}

不确定是什么原因造成的，但在主 Canvas 的下方和顶部都有一个底层 Canvas ，用于显示源图像的 10x10 模糊图像，作为预加载器。准备就绪后，图像会稍微放大。

当我切换到另一个选项卡然后又返回时，似乎会触发此错误。

Answer 1

删除了我的旧答案...

抱歉，没看出来是切换标签页引起的...

document.addEventListener('visibilitychange', function(){
    // Add code to re render the canvas or repaint...
    // You can even try using window.scrollBy(0, 1); here ;P
})

这可能是为了防止 chrome 在未聚焦的选项卡上花费资源...

如果你想知道检查绘画和 FPS 计等......对网络动画很重要......在 chrome 开发工具中启用它......

希望对您有所帮助...