New issue
Advanced search Search tips
Note: Color blocks (like █ or █) mean that a user may not be available. Tooltip shows the reason.

Issue 717809 link

Starred by 3 users
Status: WontFix
Owner:
█ junov@chromium.org
Last visit > 30 days ago
Closed: May 2017
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Windows , Mac
Pri: 1
Type: Bug-Regression



Sign in to add a comment

Occluded items in a 2D canvas bleed into the edges of a clip

Reported by vancamp....@gmail.com, May 3 2017 
UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.81 Safari/537.36

Steps to reproduce the problem:
1. Layer two things on top of each other in a 2D canvas context such that the foreground item completely occludes the background item.
2. Apply a clip to the canvas.
3. 

What is the expected behavior?
The foreground should get clipped to the path, and the background should remain invisible behind the foreground.

What went wrong?
The edges of the background become visible along the clipped path.

Did this work before? N/A 

Does this work in other browsers? Yes

Chrome version: 58.0.3029.81  Channel: stable
OS Version: 10.0
Flash Version: 

In Firefox, I get the expected result of a smooth yellow circle with no visible black bleeding through the edges.

Edge and Safari both exhibit similar behavior, though with slightly different appearances to their bled edges.
jsbin.kutovogawo.1.html
1.2 KB View Download
2017-05-02_19-55-02.gif
11.8 KB View Download

Comment 1 by sureshkumari@chromium.org, May 3 2017

Labels: -Type-Bug -Pri-2 hasbisect-per-revision M-60 OS-Linux OS-Mac Pri-1 Type-Bug-Regression
Owner: zakerinasab@chromium.org
Status: Assigned (was: Unconfirmed)
Able to reproduce the issue on Windows-7, Mac-10.12.4 and Linux Ubuntu-14.04 using chrome stable version 58.0.3029.96 and canary 60.0.3087.0.This is regression issue, broken in M55.

Using the per-revision bisect providing the bisect results,
Good build:55.0.2873.0 (Revision:421052).
Bad build:55.0.2874.0  (Revision:421409).
CHANGE-LOG URL:
---------------
https://chromium.googlesource.com/chromium/src/+log/a241e7aac6b340112403a9a9f4d2919a41972839..20ebca037955834a66e956a2dae71daef7884d25

Review-Url: https://codereview.chromium.org/2359843003
zakerinasab@ Kindly take a look and please help us to reassign to a right owner if not with respect to this change.

Thanks.

Comment 2 by kavvaru@chromium.org, May 3 2017

Labels: Needs-triage-Mobile

Comment 3 by zakerinasab@chromium.org, May 3 2017

Owner: junov@chromium.org
Assigned to junov@ for triage as I'll be OoO soon.

Comment 4 by junov@chromium.org, May 8 2017

Status: WontFix (was: Assigned)
This is because of clip anti-aliasing.  Clip anti-aliasing was enabled by default in Chrome 55 because it is generally a desirable behavior, and it matches other browsers.

The bleeding that you observe is the result of successive draws being clipped individually, and the edge pixels that have fractional coverage are getting alpha-blended.

We do no intend to backtrack on clip anti-aliasing since it is generally an improvement in rendering quality.

For your use case, you can easily workaround the issue by applying the clip to the results of compositing the background and foreground.

You can do this, for example, by using two canvases:

1) draw background object to canvas 1.
2) draw foreground object to canvas 1.
3) specify a clip path on canvas 2.
4) draw canvas 1 onto canvas 2 (drawImage).
►

Sign in to add a comment