Bug 304635

Summary: Web Inspector: CSS nesting + @media display incorrect within Styles inspector.
Product: WebKit Reporter: Nilesh Prajapati <nileshprajapati>
Component: Web InspectorAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Major CC: inspector-bugzilla-changes, karl+webkit, webkit-bug-importer
Priority: P2 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
Radar WebKit Bug Importer
Comment 1 2025-12-30 00:58:11 PST
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.