691130 - Inverse color display in Canvas on specific site

Status: NEW

(Core :: Graphics: Canvas2D, defect)

Description

[Jeff Griffiths (:canuckistani) (:⚡︎)]

A web developer demo'd for me what appears to be a canvas bug on Firefox triggered by a very specific use case. The site is this one:

http://www.barbafan.de/farbzauber/

I've recorded a screencast demonstrating how to trigger the behaviour:

http://youtu.be/__J4poExGzk

The site works as expected on other browsers.

Comment 1

[Jeff Griffiths (:canuckistani) (:⚡︎)]

cc'ing rob hawkes in case he can puzzle out why this technique is creating this behaviour.

Comment 2

[Jeff Griffiths (:canuckistani) (:⚡︎)]

Note that the inverse color behaviour doesn't always happen, you may need to hit several images and/or re-size the window to get it to 'kick in'.

Comment 3

[Franz Enzenhofer]

hi, franz, the dev who coded this canvas app:

what it does: renders image into canvas, saves original image data, does some algo. outline detection, displays outlined image.

 * on mouseover it makes a partial canvas repaint .putImageData(tempImageData, cx, cy) using the image data from the original image - this is when the buggy behavior (color distortion) occurs. 

 * when you reach the outer edges, it does a full canvas repaint .putImageData(tempImageData, 0, 0) this is when the image gets completely redrawn, the color distorsion disappears.

* the color distortion within the partial repaint seems to occure quite (but not always) predictable when a window resize happened. 

* FF seems to be the only browser where the "color distortion" behavior happens.

Comment 4

[Boris Zbarsky [:bzbarsky]]

Do people see this with hardware acceleration disabled?

Is this happening on Mac, or on Windows, or both?  (I can't reproduce so far on a Mac, fwiw...)

If someone can reproduce somewhat reliably, a regression range would be really useful.

Comment 5

[Boris Zbarsky [:bzbarsky]]

That's assuming it's a regression.

Comment 6

[Jeff Griffiths (:canuckistani) (:⚡︎)]

By 'with hardware acceleration disabled', do you mean enabling the 'layers.acceleration.disabled' pref? Or something else?

I'm using various versions ( Aurora,Nightly,Beta ) on OS X 10.7. I can reproduce it reliably, in the sense that I can always get the behaviour to happen, but I may need to refresh a few times and/or re-size the window. This leads me to wonder if there is something about particular images in this example that may trigger the issue. The example site as-is isn't a great way to test, maybe Franz can provide a really simple page that, in particular, doesn't switch source images on refresh.

Comment 7

[Franz Enzenhofer]

> This leads me to wonder if there is something about particular images in this example that may trigger the issue.
i have experienced the issue with every picture of the sample page, but yeah, the re-size of the window (especially if the window is resized smaller than the canvas) triggers this behavior quite regularly

also there is an interacitve version which can load any picture via an URL http://www.barbafan.de/farbzauber/w that shows the same behaviour on FF

 >maybe Franz can provide a really simple page that, in particular, doesn't switch source images on refresh.
i can and will do so - earliest next week.

Comment 8

[George Wright (:gw280) (needinfo me!)]

I can't reproduce this on Firefox 9.0.1 on OS X, but I can on Win7 x86_64

Comment 9

[George Wright (:gw280) (needinfo me!)]

Oops spoke too soon, I can reproduce on OS X too :)