RESOLVED WORKSFORME292971
An inset box-shadow should be in a layer *above* its host element. 
https://bugs.webkit.org/show_bug.cgi?id=292971
Summary An inset box-shadow should be in a layer *above* its host element.
Nige White
Reported 2025-05-13 22:54:49 PDT
Steps to reproduce: 1. Run https://codepen.io/Animal-Nige/pen/oggmLQX 2 Be unable to see the inset box-shadow on the element This is not an issue in the default case that a box-shadow is outset. If it is inset, then it is occluded by child elements. This should not happen. A box-shadow should be in a layer above its host. This occurs on all browsers and appears to be against the standard.: https://www.w3.org/TR/css-backgrounds-3/#shadow-layers "In terms of stacking contexts and the painting order, the outer box-shadows of an element are drawn immediately below the background of that element, and the inner shadows of an element are drawn immediately above the background of that element (below the borders and border image, if any)."
Attachments
rendering in safari, firefox, chrome (1.82 MB, image/png)
2025-05-19 22:12 PDT, Karl Dubost 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Karl Dubost
Comment 1 2025-05-19 22:12:41 PDT
Created attachment 475315 [details] rendering in safari, firefox, chrome The rendering seems to be the same currently in 3 rendering engines.
Simon Fraser (smfr)
Comment 2 2025-05-20 10:36:21 PDT
> and the inner shadows of an element are drawn immediately above the background of that element Which means behind any child elements.
Note You need to log in before you can comment on or make changes to this bug.