Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ReCaptcha on iOS scrolling issue #130

Closed
NathJoyce opened this issue Oct 26, 2016 · 56 comments
Closed

ReCaptcha on iOS scrolling issue #130

NathJoyce opened this issue Oct 26, 2016 · 56 comments
Labels

Comments

@NathJoyce
Copy link

@NathJoyce NathJoyce commented Oct 26, 2016

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
Copy link

@stevish-com stevish-com commented Oct 28, 2016

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

@Jeffbrownart
Copy link

@Jeffbrownart Jeffbrownart commented Oct 31, 2016

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

@NathJoyce
Copy link
Author

@NathJoyce NathJoyce commented Nov 1, 2016

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

@Jeffbrownart
Copy link

@Jeffbrownart Jeffbrownart commented Nov 1, 2016

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
Copy link
Author

@NathJoyce NathJoyce commented Nov 1, 2016

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
Copy link

@Jeffbrownart Jeffbrownart commented Nov 1, 2016

Thanks for the confirmation.

@Jeffbrownart
Copy link

@Jeffbrownart Jeffbrownart commented Nov 4, 2016

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
Copy link

@jasonfedor jasonfedor commented Nov 4, 2016

@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
Copy link

@Jeffbrownart Jeffbrownart commented Nov 4, 2016

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
Copy link
Author

@NathJoyce NathJoyce commented Nov 7, 2016

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

@Jeffbrownart
Copy link

@Jeffbrownart Jeffbrownart commented Nov 7, 2016

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
Copy link

@densmr densmr commented Nov 30, 2016

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
Copy link

@Jeffbrownart Jeffbrownart commented Dec 3, 2016

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
Copy link

@renzocastro renzocastro commented Jan 3, 2017

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
Copy link

@slefevre-highlights slefevre-highlights commented Jan 25, 2017

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
Copy link

@slefevre-highlights slefevre-highlights commented Jan 25, 2017

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
Copy link

@bin-xiao bin-xiao commented Jun 19, 2017

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
Copy link

@faceoffers28 faceoffers28 commented Jul 26, 2017

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
Copy link

@lowwa132 lowwa132 commented Oct 2, 2017

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

@iwa001
Copy link

@iwa001 iwa001 commented Oct 5, 2017

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
Copy link

@Jeffbrownart Jeffbrownart commented Oct 5, 2017

@JWestarp
Copy link

@JWestarp JWestarp commented Oct 10, 2017

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

@schappaughc
Copy link

@schappaughc schappaughc commented Oct 20, 2017

Have this issue too.

@dbengtsson
Copy link

@dbengtsson dbengtsson commented Oct 30, 2017

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
Copy link

@presto211 presto211 commented Nov 20, 2017

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
Copy link

@miguelmich miguelmich commented Nov 21, 2017

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

@zigsp8
Copy link

@zigsp8 zigsp8 commented Nov 28, 2017

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

@faceoffers28
Copy link

@faceoffers28 faceoffers28 commented Nov 28, 2017

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

@zigsp8
Copy link

@zigsp8 zigsp8 commented Nov 28, 2017

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

@jessicadunbar
Copy link

@jessicadunbar jessicadunbar commented Dec 1, 2017

I have the same issue in a concrete5 website.

@ragoubinho
Copy link

@ragoubinho ragoubinho commented Dec 4, 2017

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

@atu-record
Copy link

@atu-record atu-record commented Dec 4, 2017

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">
@traharison
Copy link

@traharison traharison commented Jan 4, 2018

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
Copy link

@Suki69 Suki69 commented Jan 24, 2018

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

@renzocastro
Copy link

@renzocastro renzocastro commented Feb 1, 2018

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
Copy link

@Alfredoero Alfredoero commented Mar 20, 2018

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

@svivian
Copy link

@svivian svivian commented Mar 22, 2018

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
Copy link

@jmstew2 jmstew2 commented Apr 18, 2018

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

Thanks!

@manavm1990
Copy link

@manavm1990 manavm1990 commented Apr 21, 2018

@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
Copy link

@mayaliny mayaliny commented May 4, 2018

Still no clue about how to fix this annoying scroll?

@manavm1990
Copy link

@manavm1990 manavm1990 commented May 4, 2018

@mayaliny
Copy link

@mayaliny mayaliny commented May 10, 2018

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
Copy link

@woshka woshka commented Jun 5, 2018

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

@kmaklakova
Copy link

@kmaklakova kmaklakova commented Jul 12, 2018

Having scrolling issues on iOS11 too.

@rowan-m rowan-m added the widget label Jul 29, 2018
@trumko
Copy link

@trumko trumko commented Aug 1, 2018

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
Copy link
Contributor

@rowan-m rowan-m commented Aug 1, 2018

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

@rowan-m rowan-m closed this Aug 1, 2018
daylightstudio pushed a commit to daylightstudio/FUEL-CMS-Forms-Module that referenced this issue Sep 10, 2018
@stopsopa
Copy link

@stopsopa stopsopa commented Sep 13, 2018

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

@natdean
Copy link

@natdean natdean commented Sep 17, 2018

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
Copy link

@Jivebunny Jivebunny commented Oct 23, 2018

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
Copy link

@catsmoke catsmoke commented Oct 26, 2018

Same problem here.

No posted solutions fix problem.

iPhone SE, iPhone 7+

Safari

iOS 12.0.1

@DennisdeBest
Copy link

@DennisdeBest DennisdeBest commented Dec 17, 2018

I still have the same problem on Iphone SE, and Iphone 6 asweel as an origina Ipad. I can get around the problem by scrolling back up in jQuery but that is not really a solution.

@SumitShitole
Copy link

@SumitShitole SumitShitole commented Mar 7, 2019

I still have the same problem on the iPhone. Ios Version 11.3.1

@Pavan-Concur
Copy link

@Pavan-Concur Pavan-Concur commented Jul 23, 2019

We are still experience this issue when loading the Recaptcha from iOS WkWebview. Hard to navigate to Verify button

@Pavan-Concur
Copy link

@Pavan-Concur Pavan-Concur commented Aug 5, 2019

our app is using WkWebview for doing Single sign on with different providers and one of them uses google Recaptcha and its not rendering properly. Can anyone help?

@gmcguire
Copy link

@gmcguire gmcguire commented Oct 13, 2019

@quangphuchuynh95
Copy link

@quangphuchuynh95 quangphuchuynh95 commented Nov 14, 2019

It still happens in ios 10.3.4

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
You can’t perform that action at this time.