From 59f2cd5b988180c36b08f572555faa5c643cc967 Mon Sep 17 00:00:00 2001 From: Burcu Noyan Date: Fri, 24 Jul 2026 11:23:20 -0400 Subject: [PATCH] Switch: reset -webkit-appearance and use size-agnostic pill radius (CS-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 --- packages/boxel-ui/addon/src/components/switch/index.gts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/boxel-ui/addon/src/components/switch/index.gts b/packages/boxel-ui/addon/src/components/switch/index.gts index 63caef62bab..50f555a375d 100644 --- a/packages/boxel-ui/addon/src/components/switch/index.gts +++ b/packages/boxel-ui/addon/src/components/switch/index.gts @@ -47,7 +47,10 @@ export default class Switch extends Component { width: var(--boxel-switch-width, 2.125rem); height: var(--boxel-switch-height, 1.25rem); - border-radius: 1.25rem; + /* full pill regardless of rendered size: a fixed radius tuned to + the natural height squares off when a consumer sizes the switch + taller */ + border-radius: 999px; padding: 1px; display: inline-flex; align-items: center; @@ -60,6 +63,9 @@ export default class Switch extends Component { } input[type='checkbox'] { + /* -webkit- prefix is required for iOS Safari, which otherwise + keeps the native checkbox and ignores our thumb styling */ + -webkit-appearance: none; appearance: none; }