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 Rendering

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED WORKSFORME

Severity:

Normal

CC:

bfulgham, fantasai.bugs, karlcow, simon.fraser, zalan

Priority:

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