Bug 18212 – REGRESSION: Canvas rendering changes between Safari and Nightlies

• Component: DOM
• Status: RESOLVED FIXED

[Dimitri Bouniol]

I am using a canvas to render images at a perspective on my site by rendering each line of pixels at a different scale.
The canvas object is all the icons that appear at the top of the page in the grey bar.
In Safari (3.1 and below), everything renders quickly and looks normal, but in recent Nightly builds, rendering time is significantly increased and rendering looks very bizarre.
I think it has something to do with drawing and scaling images using transforming methods, but I'm not sure.

Site: http://appkainime.bouniol.homeip.net/
Javascript: http://appkainime.bouniol.homeip.net/js/master.js

Methods of interest:

- drawAppFlow()
Calls drawInContextWithPerspectiveAndArg several times at different positions with each image to be drawn at a perspective.

- drawInContextWithPerspectiveAndArg(drawFunction, ctx, x, y, z, width, height, arg)
Draws the drawFunction(ctx, arg) in the context ctx using the one-point perspective at (x, y, z), by calling drawFunction(ctx, arg) for every vertical pixel line, then clip, scale, and apply shading to the result accordingly so a perspective is acheived.
drawFunction is always drawImage(ctx, image)
arg is an Image object to be passed to drawImage

- drawImage(ctx, image)
Draws the image in the context ctx with a shadow, or if the image is not yet loaded, draws a grey box instead.

In the meantime, I'm going to try to shorten the code down as much as possible and get a test case of the issue.

[Dimitri Bouniol]

Created attachment 20205 [details]
Difference between Safari and Nightly Renderings

http://appkainime.bouniol.homeip.net/test/

I've made a test case and I think I've narrowed it down to a problem linked to the clip() (and possibly rect()) function(s).
The test is made of two canvases, one clipping each vertical line before it is drawn, and the other doing so afterwards.

In nightly (left) and safari (right), the rendering is the same for clipping after drawing, and has a large shadow bleed, in the second canvas (the one on the right in each browser).
For the first canvas (the one on the left in each browser) however, when the clip occurs before drawing, the unwanted bleed is only present in nightly (left).

The second row shows the rendered image drawn with only drawImage and a shadow.

The third row shows each vertical line separated by 1 pixel. On safari (right), the first canvas (clip before drawing) correctly separates every line, but in every other case in both safari and webkit, the first line seems to be repeated several times before the rest of the image comes.

[Oliver Hunt]

Erk, Dimitri I just looked at this now and the test case is no longer available -- could you attach a copy to the bug? (or better yet say that it has magically fixed itself in the latest nightlies :D )

[Dimitri Bouniol]

Link fixed, but unfortunately it has not fixed itself in the latest nightlies :(
Hope you can fix it :)

[Gavin Sherlock]

I still see a difference between r42858 and 3.2.1

[Alexey Proskuryakov]

<rdar://problem/6850825>

I looked at the test case in TOT, in Safari 3.1.1 and in Firefox. If I turn off shadows, then the TOT rendering resembles Firefox.

Can you clarify what this bug is about? Is it about how shadows are rendered under transforms? Is it about how they are rendered under clipping? Can you make a smaller reduction that demonstrates just the thing that has changed? Thanks!

[timmywil]

On Chromium 13.0.779.0 (87016), drawImage does not work

test case: http://jsfiddle.net/timmywil/9HtNy/5/

[Elliott Sprehn]

Dimitri, does this still reproduce?

[Dimitri Bouniol]

I no longer have the original files, so there is no way for me to check unfortunately. I'm sure that after 4 years the safari of the time became the nightly version of the time anyways, so there's little chance that it is still relevant :)