Issue with interactive-only and height of the div that should be "hidden"

Website, Application, Performance Turnstile
1

What is the name of the domain?

localhost

What is the error number?

no error

What is the error message?

no error message

What is the issue you’re encountering

Captcha in “interactive-only” as an height, but as per documentation “If appearance is set to interaction-only, the widget will become only visible in cases where an interaction is required.”.

What steps have you taken to resolve the issue?

Try to put negative margin to inputs below.

What are the steps to reproduce the issue?

Just add data-appearance="interaction-only" on the div.

Screenshot of the error

chrome_F9YMRC5ZAf.png

2

So the main problem is that instead of being completly “invisible/hidden” the div pop out and destroy the entire layout of the form. It should not have an height until the captcha security fail.

image

3

+1 Having the same problem as well.

4

Same issue, it’s a bit annoying as it create an empty space between the form and the button. Has anyone managed to solve this issue?

5

I fixed it 2 ways.

  1. With a ResizeObserver, and negative margin based on the current height, margin being disabled when the “before-interactive-callback” event is fired.

  2. By encapsulating the captcha in a “min-heigth: 24px” and managing from there with negative margin top.

Only trickshots here…