Bug 40509 - incorrect rendering of CSS border-radius creates pixellated look
Summary: incorrect rendering of CSS border-radius creates pixellated look
Status: RESOLVED DUPLICATE of bug 21819
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: 528+ (Nightly build)
Hardware: Mac (Intel) OS X 10.6
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2010-06-11 17:22 PDT by Dave
Modified: 2010-10-07 10:49 PDT (History)
2 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Dave 2010-06-11 17:22:07 PDT
When an element with both a background and a border has a CSS border radius applied to it, the element's corners look pixellated.

Upon closer inspection, it looks like what's going on is that the background is being antialiased in such a way that it bleeds through the border on top of it, appearing to spill outside the border. (It may be that they're being antialiased the same way, but that the semitransparent nature of antialiased pixels results in the background showing through.)

One possible fix might be to draw the background so it extends only halfway to the edge of the border (0.5px for a 1px border), and figure the actual pixels based on that. Dunno if that would work.

In the interim I've only been able to think of one workaround: use two HTML elements. Do the "border" as a background on the outer element. Make the inner element 1px smaller on each side, and use its background for the actual background of the box. It's border radius then needs to be 1px smaller than that of the outer element.

You can see the problem in action by flipping through the jQuery themes at http://tinyurl.com/dbqg2t
Comment 1 Alexey Proskuryakov 2010-06-12 23:19:11 PDT
Duplicate of bug 21819? We actually have lots of bugs that seem to be duplicates - someone who has an idea about how these are drawn should clean those up. Just search for open bugs with "border radius" words in title.
Comment 2 Simon Fraser (smfr) 2010-10-07 10:49:20 PDT

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