Bug 33621
| Summary: | border-radius incomplete/rough causing rendering issues | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Mark <markg85> |
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED DUPLICATE | ||
| Severity: | Normal | CC: | dglazkov |
| Priority: | P2 | ||
| Version: | 528+ (Nightly build) | ||
| Hardware: | PC | ||
| OS: | Windows 7 | ||
| URL: | http://mageprojects.com/purecss/webkit_border_radius_bug/ | ||
Mark
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
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Dimitri Glazkov (Google)
*** This bug has been marked as a duplicate of bug 21819 ***