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 · 48 comments

Comments

Projects
None yet
@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

This comment has been minimized.

Show comment
Hide comment
@stevish-com

stevish-com Oct 28, 2016

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

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

This comment has been minimized.

Show comment
Hide comment
@Jeffbrownart

Jeffbrownart Oct 31, 2016

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

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

This comment has been minimized.

Show comment
Hide comment
@NathJoyce

NathJoyce Nov 1, 2016

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

NathJoyce commented Nov 1, 2016

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

@Jeffbrownart

This comment has been minimized.

Show comment
Hide comment
@Jeffbrownart

Jeffbrownart 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?

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

This comment has been minimized.

Show comment
Hide comment
@NathJoyce

NathJoyce 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

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

This comment has been minimized.

Show comment
Hide comment
@Jeffbrownart

Jeffbrownart Nov 1, 2016

Thanks for the confirmation.

Jeffbrownart commented Nov 1, 2016

Thanks for the confirmation.

@Jeffbrownart

This comment has been minimized.

Show comment
Hide comment
@Jeffbrownart

Jeffbrownart 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.

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

This comment has been minimized.

Show comment
Hide comment
@jasonfedor

jasonfedor 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.

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

This comment has been minimized.

Show comment
Hide comment
@Jeffbrownart

Jeffbrownart 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

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

This comment has been minimized.

Show comment
Hide comment
@NathJoyce

NathJoyce Nov 7, 2016

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

NathJoyce commented Nov 7, 2016

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

@Jeffbrownart

This comment has been minimized.

Show comment
Hide comment
@Jeffbrownart

Jeffbrownart 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.

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

This comment has been minimized.

Show comment
Hide comment
@densmr

densmr 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

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

This comment has been minimized.

Show comment
Hide comment
@Jeffbrownart

Jeffbrownart 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.

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

This comment has been minimized.

Show comment
Hide comment
@renzocastro

renzocastro 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.

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

This comment has been minimized.

Show comment
Hide comment
@slefevre-highlights

slefevre-highlights 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 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

This comment has been minimized.

Show comment
Hide comment
@slefevre-highlights

slefevre-highlights 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.

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

This comment has been minimized.

Show comment
Hide comment
@bin-xiao

bin-xiao 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.

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

This comment has been minimized.

Show comment
Hide comment
@faceoffers28

faceoffers28 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!

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

This comment has been minimized.

Show comment
Hide comment
@lowwa132

lowwa132 Oct 2, 2017

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

lowwa132 commented Oct 2, 2017

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

@iwa001

This comment has been minimized.

Show comment
Hide comment
@iwa001

iwa001 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.

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

This comment has been minimized.

Show comment
Hide comment
@Jeffbrownart

Jeffbrownart Oct 5, 2017

Jeffbrownart commented Oct 5, 2017

@JWestarp

This comment has been minimized.

Show comment
Hide comment
@JWestarp

JWestarp Oct 10, 2017

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

JWestarp commented Oct 10, 2017

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

@schappaughc

This comment has been minimized.

Show comment
Hide comment
@schappaughc

schappaughc Oct 20, 2017

Have this issue too.

schappaughc commented Oct 20, 2017

Have this issue too.

@dbengtsson

This comment has been minimized.

Show comment
Hide comment
@dbengtsson

dbengtsson 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.

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

This comment has been minimized.

Show comment
Hide comment
@presto211

presto211 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?

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

This comment has been minimized.

Show comment
Hide comment
@miguelmich

miguelmich Nov 21, 2017

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

miguelmich commented Nov 21, 2017

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

@zigsp8

This comment has been minimized.

Show comment
Hide comment
@zigsp8

zigsp8 Nov 28, 2017

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

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

This comment has been minimized.

Show comment
Hide comment
@faceoffers28

faceoffers28 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.

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

This comment has been minimized.

Show comment
Hide comment
@zigsp8

zigsp8 Nov 28, 2017

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

zigsp8 commented Nov 28, 2017

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

@jessicadunbar

This comment has been minimized.

Show comment
Hide comment
@jessicadunbar

jessicadunbar Dec 1, 2017

I have the same issue in a concrete5 website.

jessicadunbar commented Dec 1, 2017

I have the same issue in a concrete5 website.

@ragoubinho

This comment has been minimized.

Show comment
Hide comment
@ragoubinho

ragoubinho Dec 4, 2017

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

ragoubinho commented Dec 4, 2017

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

@atu-record

This comment has been minimized.

Show comment
Hide comment
@atu-record

atu-record 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">

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

This comment has been minimized.

Show comment
Hide comment
@traharison

traharison 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);
	}
}

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

This comment has been minimized.

Show comment
Hide comment
@Suki69

Suki69 Jan 24, 2018

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

Suki69 commented Jan 24, 2018

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

@renzocastro

This comment has been minimized.

Show comment
Hide comment
@renzocastro

renzocastro 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">

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

This comment has been minimized.

Show comment
Hide comment
@Alfredoero

Alfredoero Mar 20, 2018

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

Alfredoero commented Mar 20, 2018

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

@svivian

This comment has been minimized.

Show comment
Hide comment
@svivian

svivian 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.

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

This comment has been minimized.

Show comment
Hide comment
@jmstew2

jmstew2 Apr 18, 2018

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

Thanks!

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

This comment has been minimized.

Show comment
Hide comment
@manavm1990

manavm1990 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.

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

This comment has been minimized.

Show comment
Hide comment
@mayaliny

mayaliny May 4, 2018

Still no clue about how to fix this annoying scroll?

mayaliny commented May 4, 2018

Still no clue about how to fix this annoying scroll?

@manavm1990

This comment has been minimized.

Show comment
Hide comment
@manavm1990

manavm1990 May 4, 2018

manavm1990 commented May 4, 2018

@mayaliny

This comment has been minimized.

Show comment
Hide comment
@mayaliny

mayaliny 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)

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)

@carlovenus carlovenus referenced this issue May 28, 2018

Open

IOS issue #16

@woshka

This comment has been minimized.

Show comment
Hide comment
@woshka

woshka Jun 5, 2018

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

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

This comment has been minimized.

Show comment
Hide comment
@kmaklakova

kmaklakova Jul 12, 2018

Having scrolling issues on iOS11 too.

kmaklakova commented Jul 12, 2018

Having scrolling issues on iOS11 too.

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

@trumko

This comment has been minimized.

Show comment
Hide comment
@trumko

trumko 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.

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

This comment has been minimized.

Show comment
Hide comment
@rowan-m

rowan-m Aug 1, 2018

Contributor

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

Contributor

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

This comment has been minimized.

Show comment
Hide comment
@stopsopa

stopsopa Sep 13, 2018

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

stopsopa commented Sep 13, 2018

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

@natdean

This comment has been minimized.

Show comment
Hide comment
@natdean

natdean 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?

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment