Bug 304635

Summary:

Web Inspector: CSS nesting + @media display incorrect within Styles inspector.

Product:

WebKit

Reporter:

Nilesh Prajapati <nileshprajapati>

Component:

Web Inspector

Assignee:

Nobody <webkit-unassigned>

Status:

NEW

Severity:

Major

CC:

inspector-bugzilla-changes, karl+webkit, webkit-bug-importer

Priority:

Keywords:

InRadar

Version:

Safari 26

Hardware:

Mac (Apple Silicon)

OS:

iOS 26

Attachments:

Description	Flags
Screenshot of styles panel identifying the issue.	none

Nilesh Prajapati

Reported 2025-12-23 00:57:46 PST

Created attachment 477828 [details] Screenshot of styles panel identifying the issue. When nesting @media within an element id or class, the Inspect Element styles panel displays incorrect information, making it unusable for debugging styling issues. I have attached a Codepen example and screenshot of the issue. https://codepen.io/nileshprajapati/pen/YPzaZem The following bug creates a ripple effect on the style panel after nesting @media. This results in additional CSS being added that’s misaligned, causing an offset in the source map that continues to mess up with the next CSS declarations.

Attachments
Screenshot of styles panel identifying the issue. (119.58 KB, image/png) 2025-12-23 00:57 PST, Nilesh Prajapati	no flags	Details
View All Add attachment proposed patch, testcase, etc.

Radar WebKit Bug Importer

Comment 1 2025-12-30 00:58:11 PST

<rdar://problem/167326791>

Nilesh Prajapati

Comment 2 2026-03-20 02:16:18 PDT

Could you please provide an update on this bug and confirm that it has been acknowledged and that any fixes are planned?

Note You need to log in before you can comment on or make changes to this bug.