Canvas remains dirty during animations

[mmatyas]

The canvas doesn't get cleared, and the frames continue to draw on top of each other during animations, like this and this. These use clearRect to clear the canvas, but that seems to work correctly, at least I don't have problems with the example code. Dirtiness for the canvas was introduced in #5949, but unfortunately I can't bisect this issue due to half of the commits are affected with the X11 colorspace bug which was fixed some weeks ago. The problem might be in one of the dependencies too, maybe in azure.

[mmatyas]

I've managed to bisect this by applying the X11 fixes manually, it seems this broke first in 3350522, aka #6083 ...which touches quite a few files.

I wonder if @pcwalton or @ecoal95 could take a look on this?

[emilio]

The way we render into the canvas didn't change in that PR (we keep sending pixels and transforming it into an image display item.

At first I thought it was due a problem in clear_rect but I've just taken a look at it, and not forcing the canvas to get a layer (applying this diff on the commit you mentioned) makes the animation work again.

Basically having the canvas in its own paint layer makes it to remain dirty under certain conditions... But I don't really know why.

It happens just in a few cases (I think it's just when it's display: inline (the default) and position not fixed or absolute), so this is a deeper problem I think.

A canvas layer with display: block; or display: inline-block will animate nicely right now (just replacing <canvas with <canvas style="display: block" in your example).

It will also animate correctly without changing the default display property if you use position: absolute or position: fixed.

I guess @pcwalton or @glennw could give a bit of insight on this.

[mmatyas]

Looks like this was fixed, or at least doesn't happen to me. Anyone else still experiencing this bug?