Chrome中奇怪的画布渲染错误

Question

我正在使用画布来渲染图像，我遇到了这个奇怪的图形错误，有时会出现这种错误，只要我滚动就会消失。

这是反应组件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;
}

不确定是什么导致这种情况，但在主画布的顶部还有一个底层画布，用于显示源图像的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 dev工具中启用它...

希望有帮助...

Answer 2

看看这个问题和你链接到的问题（关于缓慢渲染），我会尝试使用CSS过滤器作为替代方案。浏览器支持为pretty good。如果您需要真正广泛的浏览器支持，you can use SVG filters。