From 70a27856a6c75f8fc0331db1aa77493e9aa6567d Mon Sep 17 00:00:00 2001
From: Stefanos Anagnostou <stefanos@clerk.dev>
Date: Thu, 7 Mar 2024 12:14:28 +0200
Subject: [PATCH] fix(clerk-js): Fix the input box-shadow on iOS 16 devices

---
 .changeset/light-doors-teach.md               | 5 +++++
 packages/clerk-js/src/ui/primitives/Input.tsx | 3 +++
 2 files changed, 8 insertions(+)
 create mode 100644 .changeset/light-doors-teach.md

diff --git a/.changeset/light-doors-teach.md b/.changeset/light-doors-teach.md
new file mode 100644
index 00000000000..167b3d5a3b9
--- /dev/null
+++ b/.changeset/light-doors-teach.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Fix the input box-shadow on iOS 16 devices
diff --git a/packages/clerk-js/src/ui/primitives/Input.tsx b/packages/clerk-js/src/ui/primitives/Input.tsx
index 3c005475a07..144c201d444 100644
--- a/packages/clerk-js/src/ui/primitives/Input.tsx
+++ b/packages/clerk-js/src/ui/primitives/Input.tsx
@@ -21,9 +21,12 @@ const { applyVariants, filterProps } = createVariants((theme, props) => ({
     accentColor: theme.colors.$primary500,
     ...common.textVariants(theme).body,
     ...common.disabled(theme),
+    // This is a workaround to prevent zooming on iOS when focusing an input
     [mqu.ios]: {
       fontSize: theme.fontSizes.$lg,
     },
+    // This is a fix for iOS webkit on iOS below 16, where the input is not respecting the box-shadow
+    WebkitAppearance: 'none',
     ':autofill': {
       animationName: 'onAutoFillStart',
     },