1949501 - Artifacts when using border-radius and box-shadow or outline

Status: UNCONFIRMED

(Core :: Graphics: WebRender, defect)

Description

[Brad]

Attachment: Screenshot 2025-02-20 at 10.08.00 AM.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:135.0) Gecko/20100101 Firefox/135.0

Steps to reproduce:

When using box-shadow or outline styles on an element that also uses border-radius, artifacts appear at the edges.

https://codepen.io/brad-simpson-kineo/pen/ogNxLZR

macOS 15.3.1
Firefox desktop 135.0.1

Actual results:

Artifacts appear at the edges between the element and the shadow/outline.

Expected results:

No artifacts should appear

Comment 1

[BugBot [:suhaib / :marco]]

The Bugbug bot thinks this bug should belong to the 'Core::Graphics: WebRender' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Teodor Tanasoaia [:teoxoy]]

Interestingly, chromium based browsers have the same issue in the case of outline but not with box-shadow.
Does Safari show the gaps?

Comment 3

[Brad]

(In reply to Teodor Tanasoaia [:teoxoy] from comment #2)

Interestingly, chromium based browsers have the same issue in the case of outline but not with box-shadow.
Does Safari show the gaps?

Looks like Safari is similar to chromium where the issue is with outline but not box-shadow.

Comment 4

[Brad]

Attachment: Safari screenshot