[Webkit-unassigned] [Bug 33621] New: border-radius incomplete/rough causing rendering issues

Wed Jan 13 13:21:07 PST 2010

https://bugs.webkit.org/show_bug.cgi?id=33621

           Summary: border-radius incomplete/rough causing rendering
                    issues
           Product: WebKit
           Version: 528+ (Nightly build)
          Platform: PC
               URL: http://mageprojects.com/purecss/webkit_border_radius_b
                    ug/
        OS/Version: Windows 7
            Status: UNCONFIRMED
          Severity: Normal
          Priority: P2
         Component: CSS
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: markg85 at gmail.com

Tested with chromium build 36133

Hi,

The issue is (probably) with -webkit-border-radius. I already noticed that the
resulting radius render seems a bit rough compared to how firefox renders it.
That alone wasn't an issue but there is an issue when you for example use a
white to red gradient. Then that rough border radius will get a few pixels that
are drawn in red.

Here is the Proof of Concept:
http://mageprojects.com/purecss/webkit_border_radius_bug/

index.html
===================
<!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" xml:lang="en">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>testing pure css</title>
 <link rel="stylesheet" href="style.css" type="text/css" />
 </head>
 <body>
    <div id="container">

        <div id="testbox">
        <br />
        </div>
    </div>
 </body>
</html>

style.css
===================
div#testbox
{
    border: 1px solid #bdbcbd;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    background: -moz-linear-gradient(-90deg, #ffffff 60%, #ff0000);
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff),
color-stop(60%, #ffffff), to(#ff0000));
}

div#container
{
    border: 2px solid white;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -webkit-box-shadow: 0 0 4px #bdbdbd;
    -moz-box-shadow: 0 0 3px #bdbdbd;
    width: 502px;
    height: 132px;
    position: relative;
}

Compare it with how firefox (>= 3.6) renders it.
Also it seems like the borders from border-radius are anti-aliased in firefox
but are not in webkit. Perhaps it's nice to anti-alias it in webkit as well?

Ragards,
Mark

-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.