fix(css): backdrop-filter order so prod build doesn't drop the standard#18
Merged
fix(css): backdrop-filter order so prod build doesn't drop the standard#18
Conversation
…the standard property Production CSS was silently missing the unprefixed `backdrop-filter` on every glassmorphic surface (Panel, FullCard, CompactCard, InfoTip, ScaleBar, SearchTrigger, CommandPalette). Cause: source order put the standard property first and `-webkit-` last, and esbuild's CSS minifier deduped the pair down to just the legacy prefixed form. The dev server didn't minify, so blur worked there. Swap each pair so `-webkit-backdrop-filter` is first and the standard is last. After this, the minifier keeps both declarations: modern browsers (Chrome 76+, Firefox 103+, Safari 18+) use the standard; older WebKit falls back to the prefixed form. Verified by `npm run build`: the new dist/assets/index-*.css contains both `backdrop-filter:blur(var(--blur-X))` and `-webkit-backdrop-filter:blur(var(--blur-X))` for every surface. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
skymap | 5f6409e | Commit Preview URL Branch Preview URL |
May 06 2026, 11:56 AM |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Production CSS was silently missing the unprefixed
backdrop-filteron every glassmorphic surface (Panel, FullCard, CompactCard, InfoTip, ScaleBar, SearchTrigger, CommandPalette). Result: panels rendered without their blur backdrop in deploy, even though dev server worked.Root cause
Source order put the standard property FIRST and the vendor-prefixed form LAST:
esbuild's CSS minifier (Vite's default since v4) deduped the pair down to just the legacy
-webkit-form. Dev served the un-minified source so both declarations were live and the standard property was applied. Prod served only-webkit-backdrop-filter, which Chrome has been quietly deprecating as an alias and Firefox never supported, so the blur effect disappeared.Verified live before this PR: https://skymap.rulkens.com/assets/index-IiTJi-fy.css contains 6
-webkit-backdrop-filterdeclarations and zero unprefixedbackdrop-filter.Fix
Swap each pair so
-webkit-is first and the standard is last:This is the universally-recommended ordering for vendor-prefixed CSS. After the swap, the minifier keeps both declarations — modern browsers (Chrome 76+, Firefox 103+, Safari 18+) use the standard; older WebKit falls back to the prefix.
A short comment on
Panel.module.cssexplains the rationale; the other six files just point back to it.Test plan
npm run buildclean.dist/assets/index-*.css— bothbackdrop-filter:blur(var(--blur-X))and-webkit-backdrop-filter:blur(var(--blur-X))are present for both--blur-paneland--blur-card.🤖 Generated with Claude Code