From 95b7de209c52a6d241cadfb32da037cafaaedbc9 Mon Sep 17 00:00:00 2001 From: Stefanos Anagnostou Date: Tue, 29 Apr 2025 15:30:36 +0300 Subject: [PATCH 1/2] fix(clerk-js): Fix layout shift caused by the invisible captcha mechanism --- .changeset/clean-walls-invite.md | 5 +++++ packages/clerk-js/src/utils/captcha/turnstile.ts | 1 + 2 files changed, 6 insertions(+) create mode 100644 .changeset/clean-walls-invite.md 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..ba62d607c00 100644 --- a/packages/clerk-js/src/utils/captcha/turnstile.ts +++ b/packages/clerk-js/src/utils/captcha/turnstile.ts @@ -220,6 +220,7 @@ export const getTurnstileToken = async (opts: CaptchaOptions) => { 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'; document.body.appendChild(div); } From a4385b2b393a44a2f1d300a7abf8602c204ef033 Mon Sep 17 00:00:00 2001 From: Stefanos Anagnostou Date: Tue, 29 Apr 2025 15:44:34 +0300 Subject: [PATCH 2/2] replace max-height: 0 with display none --- packages/clerk-js/src/utils/captcha/turnstile.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/clerk-js/src/utils/captcha/turnstile.ts b/packages/clerk-js/src/utils/captcha/turnstile.ts index ba62d607c00..03fab56fec1 100644 --- a/packages/clerk-js/src/utils/captcha/turnstile.ts +++ b/packages/clerk-js/src/utils/captcha/turnstile.ts @@ -219,8 +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'; + div.style.display = 'none'; // This is to prevent the layout shift when the render method is called document.body.appendChild(div); }