New issue
Advanced search Search tips

Issue 789983 link

Starred by 1 user
Status: Available
Owner: ----
Cc:
vmp...@chromium.org
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Windows , Mac
Pri: 2
Type: Bug



Sign in to add a comment

Clip-path and clip have edge artifacts with transform rotate 45deg and multicolor border-radius

Reported by ihar.mal...@gmail.com, Nov 30 2017 
UserAgent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36

Steps to reproduce the problem:
0. You need container with white background.
Inside container:
1. Create outer DIV with styles:
    clip-path: polygon(0% 0%, 50% 0%, 50% 100%, 0% 100%);
    width: 50px;
    height: 50px;

2. Create inner DIV with styles:
    border: 5px solid #f00;
    transform: rotate(-45deg);
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border-top-color: #0000;
    border-left-color: #0000;

3. You can see small red edges (Chrome 58-62 and 63 Dev). Chrome 57 is ok.
I reproduced the same with position absolute and clip property.

See plunker http://plnkr.co/edit/MCCdpwqnng1xLgkLg7eY for more details

What is the expected behavior?
I don't see these edges in Firefox 57.0 and Internet Explorer 11

What went wrong?
I see red edges from clipped areas. See screenshot.

Did this work before? Yes 57

Does this work in other browsers? Yes

Chrome version: 62.0.3202.94  Channel: stable
OS Version: 6.1 (Windows 7, Windows Server 2008 R2)
Flash Version:
chrb1.png
22.9 KB View Download

Comment 1 by krajshree@chromium.org, Dec 1 2017

Labels: Needs-Bisect

Comment 2 by dtapu...@chromium.org, Dec 4 2017

Components: Blink>Paint

Comment 3 by krajshree@chromium.org, Dec 4 2017

Labels: -Pri-2 -Needs-Bisect hasbisect-per-revision Triaged-ET M-64 Needs-Triage-M62 OS-Linux OS-Mac Pri-1
Owner: schenney@chromium.org
Status: Assigned (was: Unconfirmed)
Able to reproduce the issue on Windows 10, mac 10.12.6 and Ubuntu 14.04 using chrome reported version #62.0.3202.94 and latest canary #64.0.3282.5.

Bisect Information:
=====================
Good build: 58.0.3020.0    Revision(451874)
Bad Build : 58.0.3021.0    Revision(452347)

Change Log URL: 
https://chromium.googlesource.com/chromium/src/+log/d30e259ee12ed576f29ca8a8d414ab9e5c8d66ba..fc37a436628053178de0179e8d4566d3e1ea9800

From the above change log suspecting below change
Review-Url: https://codereview.chromium.org/2695013011

schenney@ - Could you please check whether this is caused with respect to your change, if not please help us in assigning it to the right owner.

Thanks...!!

Comment 4 by schenney@chromium.org, Dec 4 2017

Labels: -Pri-1 -Type-Bug-Regression -Needs-Triage-M62 Pri-2 Type-Bug
Summary: Clip-path and clip have edge artifacts with transform rotate 45deg and multicolor border-radius (was: Clip-path and clip have dirt edges with transform rotate 45deg and multicolor border-radius)
The behavior changes under zoom, so this is an anti-aliasing clip path issue. It's not likely my change caused it so to speak, rather it made it more likely to occur.

Maybe switching to non-anti-aliased clips will fix this, but I suspect that might have negative implications.

Comment 5 by schenney@chromium.org, Dec 4 2017

Owner: ----
Status: Available (was: Assigned)
Project Member

Comment 6 by sheriffbot@chromium.org, Dec 5

Labels: Hotlist-Recharge-Cold
Status: Untriaged (was: Available)
This issue has been Available for over a year. If it's no longer important or seems unlikely to be fixed, please consider closing it out. If it is important, please re-triage the issue.

Sorry for the inconvenience if the bug really should have been left as Available.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot

Comment 7 by schenney@chromium.org, Dec 5

Status: Available (was: Untriaged)
►

Sign in to add a comment