[Webkit-unassigned] [Bug 40509] New: incorrect rendering of CSS border-radius creates pixellated look

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=40509

           Summary: incorrect rendering of CSS border-radius creates
                    pixellated look
           Product: WebKit
           Version: 528+ (Nightly build)
          Platform: Macintosh Intel
        OS/Version: Mac OS X 10.6
            Status: UNCONFIRMED
          Severity: Normal
          Priority: P2
         Component: Layout and Rendering
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: webkit at interfacethis.com


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

-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.