Bug 90698
| Summary: | [chromium] Radial gradients are drawn incorrectly on divs without borders | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | vollick |
| Component: | WebKit Misc. | Assignee: | vollick |
| Status: | RESOLVED DUPLICATE | ||
| Severity: | Normal | CC: | enne, rbyers |
| Priority: | P2 | ||
| Version: | 528+ (Nightly build) | ||
| Hardware: | Unspecified | ||
| OS: | Unspecified | ||
vollick
Try the following example. The gradient should be centered in the div, but it's centered on the lower right corner. However, when you hover over the div, a border gets added and the gradient jumps to the correct spot. It appears that an extra scale is getting applied at some point.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Poster Circle</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
div:hover {
border-style: solid;
border-width: 1px;
border-color: #AA8888;
}
div {
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 60, from(#444444), to(#CCCCCC));
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Rick Byers
*** This bug has been marked as a duplicate of bug 91454 ***