Bug 63314 – Can only render first frame of animated gifs to canvas if image is hidden

• Status: RESOLVED
• Resolution: INVALID
• Component: Canvas

When an animated gif is being rendered by an <img>, grabbing its pixels with a drawImage() is possible. But, as soon as that gif becomes invisible by any means other than simply moving it off the screen with, say, a negative "left" position, drawImage only grabs the first frame of the gif.

Can we not have the <img> tag continue to update when it's not displayed for the sake of using them in animations? WebGL textures would be super fun.

Test 1: http://robothaus.org/bugs/gifs/gif-hidden-test.html - canvas will update properly for 2 seconds, and then <img> will become invisible and canvas will stop updating, even though drawImage is still being called.

Test 2: http://cjcliffe.github.com/CubicVR.js/cubicvr/tests/gifs/gifs.html - WebGL texture fun with gif simply moved to 'left: -600px'.

I'm using chromium 12.0.742.100 (0).

[Peter Kasting]

We purposefully don't animate invisible GIFs for CPU load reasons -- for example, on some long forum pages with hundreds of animated GIFs, drawing offscreen GIFs can easily bring the browser to its knees.

I don't know the drawing pipeline well enough to say whether there's some specific change we could put in place to support just this particular case.  Mark might know more.

That doesn't really seem to be the case here. It renders fine when gifs are off-screen, just not when they have their visibility tampered with.

Which is more broken? :/

[Matthew Delaney]

What's meant by invisible here? I'd imagine that we'd treat a gif far down a forum page (out of view) the same as one that is hanging off the left side of the page (out of view).

@Bobby, is there any benefit from having visibility set rather than having it positioned off the screen? Not sure I understand what the issue is here if you can do it equally fine with left: -something

@Matt: just seems kind of silly to have to do that. If scrollbars are present on the screen, you can just scroll over and see the gif, right?

[Matthew Delaney]

(In reply to comment #4)
> @Matt: just seems kind of silly to have to do that. If scrollbars are present on the screen, you can just scroll over and see the gif, right?

Yea, I suppose setting the opacity to 0 or something would be the first thing I'd try, though it'll still be laid out somewhere on the page, so you'd have to deal with that.

Alternatively you could hide it behind the canvas that you're drawing into. Or in the left: -something case, you could just have overflow:hidden for its container to avoid scrolling.

[Mark Rowe (bdash)]

If it’s positioned offscreen to the left or top then you’ll never be able to scroll to reveal it, even if the page is scrollable.

Ok, that's good enough, I suppose. Just seemed awkward while I was getting it to work, but, hey, this is the fun side of the internet :).

Thanks guys.

[Brent Fulgham]

The relevant test sites no longer exist. We can't take further action on this bug report.