I am using google recaptcha on a contact form. The problem is that on mobile devices, when google recaptcha is verified it scrolls the use down to bottom of page. The use will then have to scroll up again to submit a particular form.

This ONLY happens on ios devices running version 10 or higher.

I haven't been able to fix this.

You can see the issue here /

I am using google recaptcha on a contact form. The problem is that on mobile devices, when google recaptcha is verified it scrolls the use down to bottom of page. The use will then have to scroll up again to submit a particular form.

This ONLY happens on ios devices running version 10 or higher.

I haven't been able to fix this.

You can see the issue here https://www.digamberpradhan..np/contact-copy/

• javascript
• ios
• css

• This is a known bug; see github./google/recaptcha/issues/130 – cweiske Commented Jul 30, 2018 at 6:38

3 Answers 3

I managed to find a workaround for this issue. First of all, you should know that there's a callback after a response has been submitted. What I did was using that to focus what I needed in this callback. But the focus does not work correctly on iOS so you have to use another workaround which is the javascript animate.
Documentation: https://developers.google./recaptcha/docs/display

In my case, it looks like this:

<script src="http://www.google./recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
<div id="re-captcha" class="g-recaptcha" ></div>

As you can see I'm calling onloadCallback after the recaptcha has been loaded. Also, for some reason if you don't specify the render=explicit, the callback does not happen.

<script>
    var focusWhatever = function (response) {
        $("html, body").animate({ scrollTop: $("#whatever").offset().top }, "slow");
    };

    var onloadCallback = function () {
        var widget = grecaptcha.render(document.getElementById("re-captcha"), {
            'sitekey' : "yoursitekey",
            'theme': "light",
            'callback' : focusWhatever
        });
    }
</script>

In particular, in this case the animate goes directly to whatever element you want. Just so it looks nice for the user, you should select an element above what you actually want to focus.

This was the workaround I used, as I found this issue to be happening in one of the WordPress websites I manage. It's similar to Rodrigo's in that it looks to use the onload callback; however instead of scrolling to the $(element)offset().top, I instead watched the scroll event: Once the reCAPTCHA container was scrolled into view, I took note of the window's pageYOffset instead and scrolled to that instead

<script type="text/javascript">
window.reCaptchaPos = false;

function attachEvent(element, event, callbackFunction) {
    if (element.addEventListener) {
        element.addEventListener(event, callbackFunction, false);
    } else if (element.attachEvent) {
        element.attachEvent('on' + event, callbackFunction);
    }
};

function isScrolledIntoView(el) { 
    var theTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    var elemTop = el.getBoundingClientRect().top;
    var elemBottom = el.getBoundingClientRect().bottom;

    var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
    if(isVisible) { window.reCaptchaPos = theTop;  }
    return isVisible;
}

window.onscroll = function() { isScrolledIntoView(document.getElementById('reCaptcha_')); };

focusWhatever = function (response) { 
          if(window.reCaptchaPos) { $("html, body").scrollTop(window.reCaptchaPos); }
  };
</script>

This approach better centered the reCAPTCHA vertically within the iOS device's viewport

This solution is a slight modification from https://github./google/recaptcha/issues/131

Add this condition in whatever function runs on successful recaptcha submit:

if (window.innerWidth < 768 && (/iPhone|iPod/.test(navigator.userAgent) && !window.MSStream)) {
    document.getElementById("rc-anchor-container").scrollIntoView();
}

My modification is the "rc-anchor-container" line. If you inspect the console of the captcha element, every captcha I've seen thus far shares that ID. This way when scrollIntoView() runs, it's already into view, so your page doesn't move.