Bug 33621 - border-radius incomplete/rough causing rendering issues
Summary: border-radius incomplete/rough causing rendering issues
Status: RESOLVED DUPLICATE of bug 21819
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: PC Windows 7
: P2 Normal
Assignee: Nobody
URL: http://mageprojects.com/purecss/webki...
Depends on:
Reported: 2010-01-13 13:21 PST by Mark
Modified: 2010-06-04 19:54 PDT (History)
1 user (show)

See Also:


Note You need to log in before you can comment on or make changes to this bug.
Description Mark 2010-01-13 13:21:07 PST
Tested with chromium build 36133


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/

<!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">
 <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" />
	<div id="container">

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

	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));

	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?

Comment 1 Dimitri Glazkov (Google) 2010-06-04 19:54:38 PDT

*** This bug has been marked as a duplicate of bug 21819 ***