1887572 - An inset box-shadow appears faintly outside element's border with radius

Status: UNCONFIRMED

(Core :: Graphics: WebRender, defect, P3)

Description

[Christopher Kirk-Nielsen]

Attachment: boxshadow.jpg

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

Steps to reproduce:

1. Create an element with a border (2px solid black), border-radius (100px), and inset box-shadow (inset 0 0 4px yellow).
2. Zoom in to exaggerate the effect.

DEMO: https://codepen.io/chriskirknielsen/pen/OJGgPxK
The attached screenshot should make it easier to notice if you cannot see this on your own screen.

Actual results:

A very faint amount of box-shadow is peeking past the border, "outside" of the element. I suspect sub-pixel rendering might be at play, especially given I am on a MacBook with a Retina screen, which might make this more obvious.

Expected results:

The inset box-shadow should remain "clipped" to the inside of the element and not show outside of the element's borders.

Comment 1

[BugBot [:suhaib / :marco]]

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

Comment 2

[Jonathan Kew [:jfkthame]]

Yes, I can see this (faintly) with the codepen example. Interestingly, if I change the color scheme to have a light background and dark shadow instead, I no longer see any trace of the shadow outside the element. So it feels like this may be related specifically to compositing the light shadow against the dark background.

I think this is a painting artifact rather than a layout error, so more of a Graphics than Layout issue.

Comment 3

[BugBot [:suhaib / :marco]]

The severity field is not set for this bug.
:bhood, could you have a look please?

For more information, please visit BugBot documentation.