1333090 - non-default composite operation is drawn outside the canvas clip area on windows

Status: RESOLVED FIXED

(Core :: Graphics: Canvas2D, defect, P3)

Description

[Michał Stocki]

Attachment: blending-mode-firefox.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.95 Safari/537.36

Steps to reproduce:

1. Use Firefox browser on Windows (bug cannot be reproduced on macOS nor Linux)
2. Set up a canvas clip region (context.clip())
3. Change context.globalCompositeOperation to a value other than the default (tested with "multiply", "colour"),
4. Draw and fill a shape exceeding the clipping region



Actual results:

Shape is drawn outside the clipping region (clipping doesn't work as expected)

See demo: https://jsfiddle.net/Terite/gj8qt6wL/


Expected results:

Only a part of the shape which is within a clipping region should be drawn.

Comment 1

[Loic]

Reg range:
https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=ca5142
203259cd252723d34e75d3e3b799b21765&tochange=538d248fa252a4100082fd9bc3fdc08d322c
da22

Bas Schouten — Bug 1258168: Push ClearType compatible clipping layers when the last pushed layer was marked as opaque. r=jrmuizel

Comment 2

[Ryan Hunt [:rhunt]]

Looking into this, these draw calls are using a temporary surface and ShouldClipTemporarySurfaceDrawing() is returning false. But it doesn't look like any clipping happens when the temporary surface is blended back into the surface.

I don't fully understand the conditions for ShouldClipTemporarySurfaceDrawing(), but it seems like this case should be okay for temporary surface clipping? Either that or clipping should happen in the blend step.

Comment 3

[Bas Schouten (:bas.schouten)]

(In reply to Ryan Hunt [:rhunt] from comment #2)
> Looking into this, these draw calls are using a temporary surface and
> ShouldClipTemporarySurfaceDrawing() is returning false. But it doesn't look
> like any clipping happens when the temporary surface is blended back into
> the surface.
> 
> I don't fully understand the conditions for
> ShouldClipTemporarySurfaceDrawing(), but it seems like this case should be
> okay for temporary surface clipping? Either that or clipping should happen
> in the blend step.

If I remember correctly the temporary surface drawing needs to be clipped if there's an operator in use where transparent areas of the temporary surface can have an affect on the destination surface.

Comment 5

[Beliov]

I would like to inform the Mozilla Team that this issue still persists under Mozilla Developer Edition on Windows 10 with the following user agent:
"Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:90.0) Gecko/20100101 Firefox/90.0"

I would also like to confirm that the issue is windows only, as the jsfiddle link provided by the original poster works correctly under Firefox for the following devices:

• Firefox for Android 10
• Firefox for latest iOS
• Firefox for macOS

Can we expect this to be fixed for Windows in some of the next versions? This bug is causing a lot of issues when using canvas to deliver rich content to Firefox users on Windows.

Comment 6

[Lee Salzman [:lsalzman]]

Fixed by bug 1642583