Bug 292971

Summary: An inset box-shadow should be in a layer *above* its host element.
Product: WebKit Reporter: Nige White <nige.animal>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: RESOLVED WORKSFORME    
Severity: Normal CC: bfulgham, fantasai.bugs, karlcow, simon.fraser, zalan
Priority: P2    
Version: Safari 18   
Hardware: Mac (Intel)   
OS: macOS 15   
Attachments:
Description Flags
rendering in safari, firefox, chrome none

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
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.