Fix a Firefox crash from a WebKit-only scrollbar selector - #25
Merged
Conversation
The deployed site rendered a blank page in Firefox on every route. `slim_scrollbar` is applied to the app root, and it used `[&::-webkit-scrollbar-thumb:hover]:`. Firefox tolerates the unknown pseudo-element on its own but rejects it with a pseudo-class appended, so `insertRule` throws — and dominator panics rather than skipping the rule (dom.rs:1691), killing the app mid-construction. Firefox reported hasHeader=false, hasMain=false, empty body, 12 stylesheets instead of 21. This is a regression from moving the scrollbar styling out of styles.rs: a raw stylesheet drops an unparseable rule silently, so the same selector was harmless there. Making a selector into a class makes an unsupported one fatal. The pseudo-elements are not needed anyway — Firefox has supported scrollbar-width/scrollbar-color since 64 and Chrome since 121 — so the mixin now uses the standard properties alone. Adds browser tests pinning every selector shape the example applies. Since CI runs both Firefox and Chrome, an engine that rejects any of them now fails the build instead of the page. Bisected with a disposable probe first: the bare pseudo-element, the track and the thumb all insert fine; only the thumb-plus-:hover form throws. Verified in real Firefox via geckodriver, before and after, across five routes. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
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
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.
The deployed site renders a blank page in Firefox on every route — https://jedimemo.github.io/dwind/examples/#/
Cause
slim_scrollbaris applied to the app root (lib.rs:61), and it used[&::-webkit-scrollbar-thumb:hover]:. Firefox tolerates the unknown pseudo-element on its own but rejects it with a pseudo-class appended, soinsertRulethrows — and dominator panics rather than skipping the rule:That kills the app mid-construction. Firefox before the fix:
after:
This is a regression from #23. A raw stylesheet drops an unparseable rule silently, so the same selector was harmless in
styles.rs. Moving a selector into a class makes an unsupported one fatal — that trade wasn't obvious to me when I made it, and it's the kind of thing only a second engine catches.Fix
The pseudo-elements aren't needed: Firefox has supported
scrollbar-width/scrollbar-colorsince 64, Chrome since 121. The mixin now uses the standard properties alone.Bisect
A disposable probe narrowed it precisely — the bare pseudo-element is fine, only the
:hovercombination throws:[&::-webkit-scrollbar]:[width:10px][&::-webkit-scrollbar-track]:[background:transparent][&::-webkit-scrollbar-thumb]:[background:#26262C][&::-webkit-scrollbar-thumb:hover]:[background:#3A3A44][scrollbar-color:#26262C transparent]Guarding against a repeat
Adds browser tests pinning every selector shape the example applies — the spotlight
::before/::afterpair with its masks, the reveal cascade's parent-state and:nth-childvariants, the marquee's[&:hover > *], and the scrollbar properties. CI runs both Firefox and Chrome, so an engine that rejects any of them now fails the build rather than the page.Also documents the hazard in the changelog: with variants now able to express selectors a stylesheet used to hold, an unsupported one is fatal instead of ignored.
Verification
cargo fmt --all -- --check, host tests, clippy🤖 Generated with Claude Code