664154 - Background from parent element border-radius clipping bleeds through to child

Status: NEW

(Core :: Graphics: WebRender, defect)

Description

[Jon Leighton]

User-Agent:       Mozilla/5.0 (X11; Linux i686; rv:2.0.1) Gecko/20100101 Firefox/4.0.1
Build Identifier: Mozilla/5.0 (X11; Linux i686; rv:2.0.1) Gecko/20100101 Firefox/4.0.1

Please see the demo above. Part of the red background from the parent element clearly bleeds into the yellow background of the child element.

Reproducible: Always

Comment 1

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Attachment: reporter's testcase

(with some extra jsfiddle material removed)

Comment 2

[Boris Zbarsky [:bzbarsky]]

This isn't a layout issue, really; it's a graphics issue.  The problem is that when clipping the border to the rounded corner we antialias it, and drawing two antialiased edges on top of each other doesn't completely hide the bottom edge, of course.

WebKit, unsurprisingly, has the same behavior (at least both Chrome and Safari on Mac do).  I'm not sure there's actually a way to do this "right"...

Comment 3

[d]

I recall that Microsoft made a big thing out of having the only browser to be able to render "perfect" border-radius curves. Would anyone with a compatible OS see if/how they've solved it?

Comment 4

[Boris Zbarsky [:bzbarsky]]

IE9 has exactly the same red fringe that I see in Gecko and WebKit on the attached testcase.

Comment 5

[Boris Zbarsky [:bzbarsky]]

I guess one way to try to deal with this would be to paint the backgrounds to the square area and then later clip the result to the rounded-corner area....

Comment 6

[Timothy Nikkel (:tnikkel)]

I think that would be slower.

Comment 7

[Boris Zbarsky [:bzbarsky]]

Well, sure.  That's why no one does it!

Comment 8

[Gregory Pappas [:gregp]]

Still reproduces in recent versions.

Comment 9

[Gregory Pappas [:gregp]]

I can't find a clear regression range with WebRender force enabled. I'm seeing this as far back as Firefox 61.0a1 (20180320220122). From Firefox 73 to 81, it looks different, but still wrong.