Bug 34307

Summary:

border-radius renders incorrectly with one-sided border

Product:

WebKit

Reporter:

Tobin Baker <senderista>

Component:

CSS

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED WORKSFORME

Severity:

Normal

CC:

andri, bdakin, felash, senderista, simon.fraser

Priority:

Keywords:

InRadar

Version:

528+ (Nightly build)

Hardware:

Mac (Intel)

OS:

OS X 10.6

Attachments:

Description	Flags
HTML page demonstrating the issue.	none
Demonstrates the issue in WebKit browsers (displays the HTML test case).	none
Demonstrates correct behavior in Firefox (displays the HTML test case).	none
testcast with more cases	none
screenshot of new testcase in chrome	none
screenshot of new testcase in Firefox 3.6	none
testcase with more cases (updated for Opera and without prefixes)	none

Tobin Baker

Reported 2010-01-28 21:44:20 PST

Created attachment 47675 [details] HTML page demonstrating the issue. When a border is specified on only a single side of a block element and -webkit-border-radius (or border-radius in Chrome or WebKit nightlies) is specified, the border renders incorrectly (see attached HTML test case). The same page renders correctly in Firefox 3.5.7 (when the -moz-border-radius property is substituted), as another attached screenshot demonstrates. I consider this a high-priority bug since it forced me to abandon using rounded corners in a site I am currently developing (except for Firefox users). This repros on Safari 4.0.4 (6531.21.10), WebKit nightly build from 1/28/2010 (r53990), and Chrome 4.0.249.49 (35163) beta. All tests were on a MacBook Pro 4.1 running OS X 10.6.2.

Attachments
HTML page demonstrating the issue. (521 bytes, text/html) 2010-01-28 21:44 PST, Tobin Baker	no flags	Details
Demonstrates the issue in WebKit browsers (displays the HTML test case). (33.10 KB, image/jpeg) 2010-01-28 21:49 PST, Tobin Baker	no flags	Details
Demonstrates correct behavior in Firefox (displays the HTML test case). (35.18 KB, image/jpeg) 2010-01-28 21:51 PST, Tobin Baker	no flags	Details
testcast with more cases (1.65 KB, text/html) 2010-10-18 09:20 PDT, Julien Wajsberg	no flags	Details
screenshot of new testcase in chrome (34.70 KB, image/png) 2010-10-18 09:22 PDT, Julien Wajsberg	no flags	Details
screenshot of new testcase in Firefox 3.6 (10.41 KB, image/png) 2010-10-18 09:23 PDT, Julien Wajsberg	no flags	Details
testcase with more cases (updated for Opera and without prefixes) (1.99 KB, text/html) 2010-10-27 02:46 PDT, Julien Wajsberg	no flags	Details
Show Obsolete (1) View All Add attachment proposed patch, testcase, etc.

Tobin Baker

Comment 1 2010-01-28 21:49:16 PST

Created attachment 47676 [details] Demonstrates the issue in WebKit browsers (displays the HTML test case).

Tobin Baker

Comment 2 2010-01-28 21:51:33 PST

Created attachment 47677 [details] Demonstrates correct behavior in Firefox (displays the HTML test case).

Julien Wajsberg

Comment 3 2010-10-18 09:20:22 PDT

Created attachment 71042 [details] testcast with more cases This testcase further demonstrates this bug. Please note also that Box E and Box F should be identical for the left border, but they're not.

Julien Wajsberg

Comment 4 2010-10-18 09:22:50 PDT

Created attachment 71043 [details] screenshot of new testcase in chrome

Julien Wajsberg

Comment 5 2010-10-18 09:23:15 PDT

Created attachment 71044 [details] screenshot of new testcase in Firefox 3.6

Simon Fraser (smfr)

Comment 6 2010-10-18 11:19:00 PDT

<rdar://problem/8563236>

Julien Wajsberg

Comment 7 2010-10-27 02:46:18 PDT

Created attachment 71998 [details] testcase with more cases (updated for Opera and without prefixes) Opera has some bugs too. Modified this testcase to exhibit them in Opera too.

Simon Fraser (smfr)

Comment 8 2011-04-17 14:53:28 PDT

The first testcase already looks fine. The latter one still shows some issues.

Simon Fraser (smfr)

Comment 9 2011-04-17 22:22:30 PDT

This appears to be fixed now.

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