ReCaptcha on iOS scrolling issue

[NathJoyce]

I'm having the following issue with ReCaptcha on an iPhone SE (iOS 10.1) Safari and Chrome:

The "I'm not a robot" option renders fine, but when you check the box and the image challenge appears, the scroll is forced to the bottom of the page (the .focus() seems to jump to the div appended to the body) which means the challenge isn't in view and users have to scroll up.

Does anyone else have this issue? Any ideas what may be happening or how I can fix?

[stevish-com]

I'm having this issue with iOS 10.0.3 on an iPad air 2 and an iPhone 6s

[Jeffbrownart]

The problem appears to be fixed now. I didn't do anything, but now the image window opens where it should.

[NathJoyce]

Yes, it looks to be fixed, I can no longer recreate on the iPhone SE.

[Jeffbrownart]

The initial window scrolling problem seems to be fixed, but if you choose the "audio challenge" option then the same problem happens. It scrolls all the way to the bottom of the page. I see this on both an iPhone and iPad Pro. Anyone else?

[NathJoyce]

Yes, I can see recreate this. When clicking the audio challenge (after the original picture challenge has appeared) I am being scrolled to the bottom of the page. Again, iPhone SE iOS 10.1

[Jeffbrownart]

Thanks for the confirmation.

[Jeffbrownart]

The original scrolling issue has returned! Unfortunately, the recaptcha scrolls all the way to the bottom of the page again with both the image and audio challenges. Does anyone else see this on iOS? Thanks.

[jasonfedor]

@Jeffbrownart Can't reproduce on iOS 10.0 or 10.1.1, what's your configuration/site where you see the problem? The root cause seems like an Apple bug, but we're doing our best to deal with it on our side.

[Jeffbrownart]

The problem appears to come and go for no reason (on my end anyway). Other people are definitely seeing the same pattern at the same time. I have iOS 10.1.1 on both my iPhone 5s and iPad Pro. I see the problem on a Wordpress (latest version) site that is under development. The desktop mac seems OK. Thanks

[NathJoyce]

I can't reproduce the original issue or the audio challenge issue. iPhone SE 10.1.1

[Jeffbrownart]

Thank you for your response. Now, there is a new behavior that might provide some insight to an expert. In the beginning, the problem was simply about scrolling straight to the bottom of the page, hiding the visual challenge. Then for a while it was fixed, and worked beautifully! Now, I see a brief flash of the image challenge where it should be, but then immediately it scrolls to the bottom of the page and the main body of the page is slightly "grayed out" and, after you scroll up, the image challenge is not grayed out. This happens on the iPhone 5s iOS 10.1.1. Interestingly, the same thing happens on the iPad Pro (iOS 10.1.1) but the main body of the page does not get grayed out. I get the same behavior with all plugins deactivated, except one, Thrive Content Builder, that is necessary to render the pages. I don't think I have changed anything that would make the reCAPTCHA act differently, so it is pretty frustrating. Especially since it was working perfectly for a while.

[densmr]

I have the same issue on iPhone's 4 and 4S. And the most annoying it's reproducing on Android. As we investigated this problem appears on the phones with small screens (800×480 and lower) and only on the devices with non-chromium webview, e.g. Samsung, HTC, Fly, etc. Scroll is disabled and users cannot confirm the captcha. Problem has started since 23–26 of November

[Jeffbrownart]

Everything, both the visual, and the audio, challenges seem to be working properly on iPhone and iPad Pro! Thank you to the man or woman behind the curtain that sorted it all out. The "out of control" scrolling issues were making the reCAPTCHA unusable, but now all is well. Much appreciated.

[renzocastro]

I have the same problem. When recaptcha is top of the page there isn't problem. But if recaptcha is ... ~700px down of the page the problem appears.

[slefevre-highlights]

We are getting an issue on iOS 10 where, after successfully completing the recaptcha, the screen is scrolled to the bottom, past the recaptcha and submit button. On iOS 8, this form works okay. You should be able to re-create it at https://www.stenhouse.com/user/register . Thanks for looking in to this!

[slefevre-highlights]

Also, forgot to mention, we did not encounter this bug on Desktop browsers (chrome, FF, IE on Windows and Mac), even in mobile resolution.

[bin-xiao]

I have similar problem on iPhone 6+ and iPad. I thought it's responsive bug, but it's ok on Android tablet. It happens when I check the checkbox and image challenge appears, then after click Verify, the page scrolls down a bit(not to the page bottom) that the reCaptcha is out of the current screen.

[faceoffers28]

Same issue on iPhone 6S running version 10.3.2. Does anyone know how to force it to stay within the current div? My reCAPTCHA is in the middle on the page. When I click VERIFY, it scrolls down a bit, but not to the very bottom of the page.

My code.

 <div class="g-recaptcha" data-sitekey="SOMEKEY"></div><br>

 <div id="recaptcha"></div><br>

Any help is much appreciated. Thanks!

[lowwa132]

Same issue here starting from iOS 10, and same issue with iOS 11.

[iwa001]

It's happening again on iPhone (Safari & Chrome) and Window's Chrome with Device Toolbar enabled (any mobile devices with screen width smaller than 415px emulation) on portrait view. Strangely enough, it's working on landscape view. Seems like the ReCaptcha challenge is showing way above the top of the screen and without being able to scroll, there's no way to answer the challenge.

[Jeffbrownart]

Frustrating!

On Oct 5, 2017, at 3:44 AM, iwa001 notifications@github.com wrote:

It's happening again on iPhone (Safari & Chrome) and Window's Chrome with Device Toolbar enabled (any mobile devices with screen width smaller than 415px emulation) on portrait view. Strangely enough, it's working on landscape view. Seems like the ReCaptcha challenge is showing way above the top of the screen and without being able to scroll, there's no way to answer the challenge.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[JWestarp]

I've got this Issue, too on iPhone with Chrome. :(

[ghost]

Have this issue too.

[dbengtsson]

Just adding that I've got this issue also. It's not working in neither landscape or portrait on iOS 11.0.3 Safari on both an iPhone 7+ and iPhone 6S.

It seems to be the callback after verifying the captcha that does the scrolling since I either get pushed to the bottom after clicking the recaptcha and it verifies me straight away or after completing the challenge. No issues in any other browsers.

[presto211]

Having same issue on iPhone. Checking box to verify that "I am not a robot" immediately jumps me to bottom of page. When I scroll back up, I'm verified and ready to send message...confusing for folks visiting our site. Has anyone had luck perhaps tweaking their code to avoid this?

[miguelmich]

I'm having the same issue with contact form 7 in Wordpress

[zigsp8]

We are seeing this scroll to bottom problem on an iphone7 with wordpress contact form 7. Any resolution here?

[faceoffers28]

@zigsp8 Have you asked the Contact Form 7 folks? I would be curious as to what they have to say about it.

[zigsp8]

I've asked. We'll see what they say.

[jessicadunbar]

I have the same issue in a concrete5 website.

[ragoubinho]

i have the same issue in mobile the page scroll down When I click VERIFY ! any solution ?

[atu-record]

I've not fixed the issue but built a workaround with defining a callback that scrolls up after verfication.

var onReCaptchaSuccess = function () {
    var destElementOffset = $('#recaptchaArea').offset().top;
    $('html, body').animate({scrollTop: destElementOffset }, 500)
}

call it via data attribute

<div class="g-recaptcha" data-theme="light"  data-type="image" data-sitekey="XXXXXX" 
data-callback="onReCaptchaSuccess">

[raharisont]

Another solution but it does not really solve the problem, it's based on the solution proposed by @atu-record Only a little update on the callback function.

var onReCaptchaSuccess = function() {
    if (window.innerWidth < 768 && (/iPhone|iPod/.test(navigator.userAgent) && !window.MSStream)) {
        var destElementOffset = $('.g-recaptcha').position().top - window.innerWidth;
        $('html, body').animate({ scrollTop: destElementOffset }, 0);
    }
}

[Suki69]

+1 IOS 11.2.2 Iphone6+Ipad Air2 Safari 11 + Chrome 63.xxx

[renzocastro]

I improved a little the script of @atu-record for more precision using the script of https://stackoverflow.com/a/46332373/172796 and without jQuery.

var HEADER_HEIGHT = 0; // Height of header/menu fixed if exists
var isIOS = /iPhone|iPad|iPod/i.test(navigator.userAgent);
var grecaptchaPosition;

var isScrolledIntoView = function (elem) {
  var elemRect = elem.getBoundingClientRect();
  var isVisible = (elemRect.top - HEADER_HEIGHT >= 0 && elemRect.bottom <= window.innerHeight);

  return isVisible;
};

if (isIOS) {
  var recaptchaElements = document.querySelectorAll('.g-recaptcha');

  window.addEventListener('scroll', function () {
    Array.prototype.forEach.call(recaptchaElements, function (element) {
      if (isScrolledIntoView(element)) {
        grecaptchaPosition = document.documentElement.scrollTop || document.body.scrollTop;
      }
    });
  }, false);
}

var onReCaptchaSuccess = function () {
  if (isIOS && grecaptchaPosition !== undefined) {
    window.scrollTo(0, grecaptchaPosition);
  }
};

<div class="g-recaptcha" data-theme="light" data-type="image" data-sitekey="XXXXXX" 
data-callback="onReCaptchaSuccess">

[Alfredoero]

Hi, none of the above have worked for me, is there any other solution?

[svivian]

I have the same issue, it's been happening for a while on multiple sites.

Simplest way to verify and reproduce would be on 4chan (4chan.org/sci/ should be sfw). Go to a longish thread, scroll halfway down, click the post number on the right as if you're going to reply, click the recaptcha tick. You'll get scrolled way down the page.

Must be a problem on Google's end because it occurs on many websites. Currently on iOS 11.2.6 using Safari, but clearly from this thread it's been happening for a long while.

[jmstew2]

Hi, where would I put each of the two code sections from @renzocastro's solution above? I'm a beginner!

Thanks!

[manavm1990]

@jmstew2 That's probably a StackOverflow question. Generally speaking, you would put the script in an external JS file or inside <script> at bottom of your page. And the markup to display the recaptcha would go...wherever you wanted it to be in your markup.

[mayaliny]

Still no clue about how to fix this annoying scroll?

[manavm1990]

Using invisible captcha works to fix this.

On Fri, May 4, 2018 at 10:29 AM Paolo notifications@github.com wrote:

Still no clue about how to fix this annoying scroll?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/google/recaptcha/issues/130#issuecomment-386637657, or mute the thread https://github.com/notifications/unsubscribe-auth/ADOxj0BmJUakCU3FKCO9Wd6ECAHp1SK8ks5tvHP2gaJpZM4Kg6HM .

--

---

Manav Misra Web Consultant 618-281-7252 <javascript:void(0);>

https://twitter.com/VisionWebSoft

[mayaliny]

Added a brand new invisible recaptcha key to the form (wordpress +contact form 7 integrated with recaptcha) and still the scroll happens on IOS 11.2.1 (iphone 7)

[woshka]

I am using himiklab\yii2\recaptcha\ReCaptcha and invisible recaptcha but still that scrolling happens how to fix this?

[kmaklakova]

Having scrolling issues on iOS11 too.

[trumko]

I think the other aproach how to fix this issue is to use debounce function with scroll event listener. I am using jQuery and debounce method from underscore lib, but you can implement this fix without jQuery and use your own debounce function (or for example lodash debounce method).

var scrollTopPosition = 0;

function getScrollTopPosition() {
  scrollTopPosition = $(window).scrollTop();
}

// Each time when user scrolls page and it has passed 100 milliseconds after that,
// we save the scroll value in scrollTopPosition variable
$(window).scroll(_.debounce(getScrollTopPositionWithDelay, 100))

// Now, when user checks ReCaptcha box, the scroll is forced to the bottom of the page,
// but thanks to 100 miliseconds delay, scrollTopPosition value will not be overwritten 
// and could be used in ReCaptcha callback to sroll up to previos position.
function yourReCaptchaCallback() {
  // ...
  $(document).scrollTop(scrollTopPosition);
}

Also I guess, it would be better to narrow down the use of this fix only for iOS devices.

[rowan-m]

You might want to look at the v3 support in the most recent release. That uses a wholly invisible reCAPTCHA that just returns a confidence score for the request. This might alleviate some of your issues. Example hosted at https://recaptcha-demo.appspot.com/recaptcha-v3-request-scores.php

[stopsopa]

So that's it, don't use recaptcha v2? and that's the solution?

[natdean]

I'm also having the same issue as everyone above. It is only happening with landscape mobile views. The recaptcha pop up is not scrollable and the user cant verify the recaptcha. Any ideas?

[Jivebunny]

Tried all solutions but no effect. Will try v3 I guess. Invisble might not be possible to implement because third party source code I can't control. Ugh.

Solved with v3. Don't like it though because it needs to be on as much pages as possible for best results.

[catsmoke]

Same problem here.

No posted solutions fix problem.

iPhone SE, iPhone 7+

Safari

iOS 12.0.1