LayoutPanel animation with Canvas

[RyanZA]

I have a layout panel with two child panels, with one of the children being a HTML5 canvas.

It all works well until I try to use the animate() method of the parent canvas to move the children around. It makes the canvas lose its image and reset to transparent.
Any idea why animate() would do this, and any workarounds to animate panel movement while not making the canvas redraw?

[Ümit Seren]

Looks more like a browser/javascript issue than a GWT issue. LayoutPanels using CSS absolute positioning for animation.
On which browsers do you have this issue? Firefox? chrome?

[RyanZA]

I found the cause - in onResize() I was setting the size of the canvas to match the container. Doing that causes the canvas to be cleared. onResize() is called on the canvas even though it was not changing size - a sibling was changing size only. So it may be a minor bug in LayoutPanel in that it calls onResize() on all children during an animation, not just the children being animated.

I changed the onResize() to only set the pixel size of the canvas when it actually differed from the current size, which seems to fix it.

Code:

        int width = this.getElement().getParentElement().getClientWidth();
        int height = this.getElement().getParentElement().getClientHeight();
       
        if (this.getCoordinateSpaceWidth() != width)
            this.setCoordinateSpaceWidth(width);
        if (this.getCoordinateSpaceHeight() != height)
            this.setCoordinateSpaceHeight(height);