Skip to content

Conversation

RobinMalfait
Copy link
Member

@RobinMalfait RobinMalfait commented Oct 6, 2025

This PR fixes a weird Safari rendering bug in the devtools. This seems to be happening when using @supports, especially nested @supports at-rules.

The issue is that our color-mix fallback generates declarations directly in @supports at-rules which causes the weird rendering bug in Safari.

Adding this intermediate & rule seems to fix the issue.

This is a workaround for a browser bug, but the additional 3 characters shouldn't be the end of the world.

Test plan

  1. Updated the tests with the new & { } intermediate rule
  2. Other tests still pass as expected
Before After
image image

Fixes: #19065

[ci-all]

This is not strictly needed to make it work, but without it the Safari
devtools show weird results.

It is a Safari browser bug, but this is a small enough workaround that
it is worth adding ourselves.

If we ever handle flattening ourselves, then this could in theory also
go away.
@RobinMalfait RobinMalfait requested a review from a team as a code owner October 6, 2025 17:22
@thecrypticace
Copy link
Contributor

Have we filed (or found) a webkit bug for this?

@RobinMalfait
Copy link
Member Author

I couldn't find one immediately, but will talk to you about this tomorrow 👍

Going to merge this in the meantime.

@RobinMalfait RobinMalfait merged commit 73628f6 into main Oct 6, 2025
21 checks passed
@RobinMalfait RobinMalfait deleted the fix/issue-19065 branch October 6, 2025 18:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Safari dev mode style view is a mess.
2 participants