Chrome中奇怪的画布渲染错误答案

【问题标题】：Weird canvas rendering bug in ChromeChrome中奇怪的画布渲染错误
【发布时间】：2016-10-05 16:23:38
【问题描述】：

我正在使用画布渲染图像，但有时会遇到这个奇怪的图形错误，当我滚动时它会消失。

这是反应组件的一部分，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 模糊图像，作为预加载器。图像准备好后会稍微放大。

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

【问题讨论】：

看起来您正在一遍又一遍地渲染图像的顶部。也许你在渲染之前忘记调用ctx.beginPath()，或者你在再次渲染之前没有清除画布。但是没有代码我们只能猜测出什么问题了..
这不是真的，不。我正在渲染一次。图像实际上是一个反应组件，仅在挂载和源更改时渲染。而且我在再次渲染之前清除画布，即使那样，这如何解释滚动时消失的问题？
能否发个网站链接查看一下？
@divix 不幸的是，没有。这是我的一个项目，它在我的机器上。我没有主机。
您应该发布一个展示实际问题的演示。 CSS看起来很奇怪。您是否尝试删除测试的所有转换属性？

标签： css google-chrome canvas

【解决方案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 开发工具中启用它...

希望对您有所帮助...

【讨论】：

这比修复更hacky。它是由切换选项卡引起的，但它不会一直发生，有时它只是在导航我的应用程序时发生。我严重怀疑它与我的代码有什么关系，因为我没有代码可以监听对图像执行任何操作的滚动事件。
我认为它可能是由操作系统或 Chrome 本身造成的以节省 ram/cpu 资源......它在苹果操作系统上发生得更积极......所以我认为你必须手动重新渲染页面发生时...
滚动只会触发在 chrome 中重新绘制...（重新渲染可见元素）

【解决方案2】：

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

【讨论】：