Switch: reset -webkit-appearance for iOS + size-agnostic pill radius (CS-12328)#5606
Closed
burieberry wants to merge 1 commit into
Closed
Switch: reset -webkit-appearance for iOS + size-agnostic pill radius (CS-12328)#5606burieberry wants to merge 1 commit into
burieberry wants to merge 1 commit into
Conversation
…S-12328) iOS Safari kept rendering the native checkbox because the thumb was reset with unprefixed `appearance: none` only; add `-webkit-appearance: none` so the thumb honors our background/box-shadow/border-radius on iOS. Also swap the track's fixed 1.25rem radius for 999px so it stays a full pill when a consumer sizes the switch taller than its natural height. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Contributor
Contributor
Author
|
Closing for now. Investigation on CS-12311 showed the stock Switch actually renders fine on iOS, so the |
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.
What
Two cross-browser / robustness fixes to the boxel-ui
Switch(packages/boxel-ui/addon/src/components/switch/index.gts):iOS Safari native control leak. The thumb
<input type="checkbox">was reset with unprefixedappearance: noneonly. iOS Safari keeps rendering the native checkbox unless-webkit-appearance: noneis also set, so on iOS the thumb ignoredbackground/box-shadow/border-radiusand rendered as a squared native control. Added-webkit-appearance: nonealongsideappearance: none.Track radius tied to natural size. The track used a fixed
border-radius: 1.25remtuned to the default height, so consumers that size the Switch taller (e.g. the homepage mode toggle) got a non-pill track. Switched toborder-radius: 999px— renders identically at the natural size and stays a full pill at any size.Why
Surfaced by the homepage mode-toggle bug (CS-12311): the toggle looked squared only on real iOS Safari, never in desktop responsive view — the tell-tale sign of a native-control-appearance leak rather than a radius-math problem. Affects every
Switchinstance on iOS, not just the homepage toggle.Follow-up
cardstack/boxel-home carries a temporary consumer-side override for this in
boxel-ai-website/components/site-navbar.gts(PR #68). Once this lands and boxel-ui is bumped there, that override should be removed (tracked in CS-12328).Testing
Fixes CS-12328.
🤖 Generated with Claude Code