diff --git a/.changeset/spicy-olives-float.md b/.changeset/spicy-olives-float.md
new file mode 100644
index 00000000000..e0a186e2b64
--- /dev/null
+++ b/.changeset/spicy-olives-float.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Fixes an issue where the password field would not render during autofill event until the user interacted with the screen.
diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
index f55510885e6..028170a46c7 100644
--- a/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
+++ b/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
@@ -448,7 +448,10 @@ const InstantPasswordRow = ({ field }: { field?: FormControlState<'password'> })
   useLayoutEffect(() => {
     const intervalId = setInterval(() => {
       if (ref?.current) {
-        const autofilled = window.getComputedStyle(ref.current, ':autofill').animationName === 'onAutoFillStart';
+        const autofilled =
+          window.getComputedStyle(ref.current, ':autofill').animationName === 'onAutoFillStart' ||
+          // https://github.com/facebook/react/issues/1159#issuecomment-1025423604
+          !!ref.current?.matches('*:-webkit-autofill');
         if (autofilled) {
           setAutofilled(autofilled);
           clearInterval(intervalId);