Box shows out of view

[ttomdewit]

Hi team 👋,

First of all a huge thank you to all of you for making Recaptcha possible and thank you for taking time to read my issue. What follows is what I hope a comprehensive issue that has to do with the recaptcha box showing out-of-view in some cases.

If anything is unclear in what follows, let me know and I'll try to clear things up in a (new) comment.

What's going wrong?
I believe the box isn't showing up at the right position. With approval I've attached two screen shots (Chrome and Edge browsers).

What should happen?
I believe the box should display itself in the center of the page, no matter where the form is located on the screen. I believe it should not be relevant to the form it's attached to but separated from any form on the page so it will be visible, no matter what.

In my opinion it should either detach itself from the form and always be visible no matter the scroll position (these are long forms) or it should attach itself to the submit button that was clicked instead of the form itself. This is because the button it still visible to the user even though Google Recaptch hijacks the page.

Attached screen shots
Google Chrome

Edge on Browserstack

[ttomdewit]

Hi team,

I'm pleased to say we "fixed" the issue by moving the div you use to attach the widget to has been moved.

[cfviotti]

Hey @ttomdewit! I'm having a pretty similar issue. Our site has the body moved to the left with a negative margin in order to show a login sidebar (where the recaptcha widget is resided),
I've noticed the puzzle window invoked by the recaptcha widget renders itself in the center of the body, absolute posiotioned dynamicaly via JS, and that's why it's outside the screen in my case.
Was your puzzle window doing the same thing? If I understood it right, it was not. Would you care to give more details on how you solved this? :)

This is how ours is:

[sazarghani]

Hi, I am wondering if someone could help me getting the recaptcha picture grid in the right place: We use recaptcha in some Angular Material ui, on a popup window. It shows correctly in the middle of the visible area. But if google decides to show the picture grid, then it is somewhere too high, out of the visible area. Your help is much appreciated.

[zagarskas]

This is still a problem.

In my case I am dealing with a FORM inside of a POPUP.

Which works perfectly fine, however, we recently noticed that in 2023 our leads for that landing page dropped off about 50% - after a great deal of time wasting we got a complaint from a customer who could not "unlock the special offer" - we discovered that when ReCapcha fires and the popup is open the ReCapcha does EXACLTY what is shown here by ttomdewit [above]

That cost us about $2000-5000 in Google Ads... (yuk) (another story and harder to prove, possibly way more since this popup was installed in mid-2022)

Anyway:
about 50% of the folks who tried to use the Popup version of our form (which is a special offer) just saw either a white overlay, nothing at all, or a tiny bit of the bottom of the ReCapcha. IT should be noted we have 3 forms on the page: Main form, then a popup, then a newsletter. ALL protected by ReCapcha

The popup has a script that "freezes" the HTML/BODY elements to remove the scrollbar and lock the screen. Which is nice, however to our horror Google is using the HTML BODY HEIGHT to determine where exactly to place the ReCapcha popup.

This, alas, has caused a paradox:
We either NOT use the ScrollBar popup lock, or, we NOT use ReCapcha in the popup form. (yuk)

I am of course going to attempt to rewrite the popup script, in the meantime the solution was to remove the scrollbar "lock" tactic (which sets the HTML/BODY css to fixed, and overflow:hidden) - problem with that is now the user can scroll the html/body in the background while a popup is open. (yuk)

In closing, that particular tactic is causing the ReCapcha form element to "not know where to show" on the page. If I can get the ReCapcha to trigger consistently I could capture this by video... (which I will also attempt)**

**Check this Stack: https://stackoverflow.com/questions/48431361/force-google-recaptcha-challenge
We should have some way of TESTING the reCapcha popup to show the problem

[zagarskas]

I have opened an item here:
#520

And captured the issue in all its glory here:
https://www.screencast.com/t/0UgWen4i

Short summary: when fixed/absolute positioning is being used the position of the recapchaPopup can be forced off screen. Not sure how to fix (other than not using modals) - please let me know if you have any ideas?

[strikingly-william]

I also encountered a similar problem. I used the pop-up box of https://ant.design/ with Google ReCaptcha embedded in it. In the windows computer browser, I also encountered the same problem as above. Does anyone have more information? The solution?