Last Comment Bug 474386 - -moz-border-radius should not use transparency for anti-aliasing
: -moz-border-radius should not use transparency for anti-aliasing
Status: NEW
: css3, testcase
Product: Core
Classification: Components
Component: Layout (show other bugs)
: 1.9.1 Branch
: x86 Windows Vista
: -- normal with 2 votes (vote)
: ---
Assigned To: Nobody; OK to take it and work on it
:
Mentors:
Depends on: 466572
Blocks: border-radius
  Show dependency treegraph
 
Reported: 2009-01-19 20:59 PST by Christopher Robert Jaquez
Modified: 2015-03-09 14:09 PDT (History)
7 users (show)
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---


Attachments
Simplified test case (585 bytes, text/html)
2009-01-19 21:02 PST, Christopher Robert Jaquez
no flags Details
testcase without shadow (556 bytes, text/html)
2009-09-04 12:14 PDT, Emil Ivanov
no flags Details
TestCase.htm (522 bytes, text/html)
2015-03-09 14:09 PDT, Christopher Robert Jaquez
no flags Details

Description Christopher Robert Jaquez 2009-01-19 20:59:36 PST
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.1b3pre) Gecko/20090119 Shiretoko/3.1b3pre (.NET CLR 3.5.30729)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.1b3pre) Gecko/20090119 Shiretoko/3.1b3pre (.NET CLR 3.5.30729)

When a box-shadow is used on an element with corners rounded via a border-radius, the anti-aliasing to smooth the rounded corners blends with the background-color for the parent element, not the effective background-color that is produced by the box-shadow.

Reproducible: Always

Steps to Reproduce:
Visit attached test case.
Actual Results:  
Red curves are seen at the corners.

Expected Results:  
No red should be visible.
Comment 1 Christopher Robert Jaquez 2009-01-19 21:02:56 PST
Created attachment 357760 [details]
Simplified test case

Simplified test case showing the visible artifacts.
Comment 2 henryfhchan 2009-02-13 20:57:46 PST
works for me
Comment 3 Nochum Sossonko [:Natch] 2009-02-14 17:35:57 PST
(In reply to comment #2)
> works for me

Can you please include your build information.
Comment 4 David Baron :dbaron: ⌚️UTC+8 (review requests must explain patch) 2009-02-14 20:38:37 PST
I think this is probably a duplicate of a bug requesting that we use supersampling for anti-aliasing, if there is one.  In our current architecture, things don't antialias "with" other things; the edge is simply partially opaque and drawn over whatever else was drawn there before, independent of parts of the pixel covered.
Comment 5 Christopher Robert Jaquez 2009-02-15 19:25:46 PST
(In reply to comment #4)
> things don't antialias "with" other things; the edge is simply partially opaque

This seems like the best solution anyway.

Could this be solved then, by drawing the box-shadow under the entire source box when it contains partially opaque pixels/regions?  Or at least drawing them under any partially opaque pixels; possibly better, not sure which is more expensive: drawing what won't be seen or figuring out which pixels or regions are partially opaque?

It could still be optimized for the (probably? hopefully?) typical case where the source box is completely opaque.
Comment 6 Christopher Robert Jaquez 2009-03-01 22:10:10 PST
(In reply to comment #5)
> Could this be solved then, by drawing the box-shadow under the entire source

This would be incorrect.  I just re-read the spec (http://www.w3.org/TR/css3-background/#the-box-shadow) and it says: "The shadow is drawn outside the border edge only" so my suggestion above wouldn't apply.  I still think that it should draw the shadow where the edge has partially transparent pixels as in the test case.
Comment 7 Emil Ivanov 2009-09-04 12:14:53 PDT
Created attachment 398732 [details]
testcase without shadow

I've seen the same problem recently, but without box-shadow. Border-radius should not use transparency for anti-aliasing because the backgrounds or shadows under the box are making it with unexpected mixed color, and sometimes is very ugly.
Comment 8 Zack Weinberg (:zwol) 2009-09-04 12:41:00 PDT
Border-radius is just filling the space between two rounded rectangles, and I don't think Cairo gives us any control over whether or not its curved-edge antialiasing uses transparency.

Looking at your test cases, I think this is the same as bug 466572.
Comment 9 Sebastian Zartner 2011-06-22 06:02:09 PDT
Also bug 527695 describes the same issue. So two of them should be marked as duplicates of the other one. 527695 was the first one I found searching for the problem seen, so I'd say, this issue and 466572 should be marked as duplicates of 527695 even when they were entered before.
Comment 10 Brandon Frohs 2015-03-09 13:53:08 PDT
Comment on attachment 357760 [details]
Simplified test case

The "Simplified test case" file no longer shows the issue due to using the -moz- prefix on border-radius and box-shadow. The file should be changed as follows:

><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
><html xmlns="http://www.w3.org/1999/xhtml" >

<!DOCTYPE html>
<html>

> -moz-border-radius: 1em;
> -moz-box-shadow: 0 0 0 0.5em Green;

-moz-border-radius: 1em;
-moz-box-shadow: 0 0 0 0.5em Green;

---

There are also mixed tabs/spaces. I wasn't able to submit a file and mark the old one as obsolete, or I would have done that instead.
Comment 11 Christopher Robert Jaquez 2015-03-09 14:09:39 PDT
Created attachment 8574849 [details]
TestCase.htm

Updated per Comment 10.  Thanks for noticing.

Note You need to log in before you can comment on or make changes to this bug.