diff --git a/.changeset/clean-walls-invite.md b/.changeset/clean-walls-invite.md new file mode 100644 index 00000000000..2bc163695a6 --- /dev/null +++ b/.changeset/clean-walls-invite.md @@ -0,0 +1,5 @@ +--- +'@clerk/clerk-js': patch +--- + +Fix layout shift caused by the invisible captcha mechanism diff --git a/packages/clerk-js/src/utils/captcha/turnstile.ts b/packages/clerk-js/src/utils/captcha/turnstile.ts index a1c4b675790..03fab56fec1 100644 --- a/packages/clerk-js/src/utils/captcha/turnstile.ts +++ b/packages/clerk-js/src/utils/captcha/turnstile.ts @@ -219,7 +219,7 @@ export const getTurnstileToken = async (opts: CaptchaOptions) => { widgetContainerQuerySelector = `.${CAPTCHA_INVISIBLE_CLASSNAME}`; const div = document.createElement('div'); div.classList.add(CAPTCHA_INVISIBLE_CLASSNAME); - div.style.maxHeight = '0'; // This is to prevent the layout shift when the render method is called + div.style.display = 'none'; // This is to prevent the layout shift when the render method is called document.body.appendChild(div); }