The problem occurs when an iOS user succeeds in verifying a Google reCaptcha (with or without the additional challenges); the window scrolls down way past the CAPTCHA, which can be very confusing for users. It was brought to my attention because some users at a site I manage were confounded when they were scrolled to a login form below a registration form…they thought it was some vicious loop! ?
This issue is documented at Google Groups, GitHub, and stackoverflow. The latter link is where most of the code below is sourced from, so credit to Jacob Cruz.
This was all within the context of a Gravity Forms form, using their native CAPTCHA field. I placed the code shown below in an HTML field after the CAPTCHA field.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script> // reCAPTCHA div container ID is hard coded below window.scrollCaptcha = false; document.getElementById('input_1_8').setAttribute('data-callback','scrollFixCaptcha'); function scrollFixCaptcha(a) { if(window.scrollCaptcha) { jQuery("html, body").scrollTop(window.scrollCaptcha); } } document.addEventListener("scroll", function() { var el = document.getElementById('input_1_8'); 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.scrollCaptcha = theTop; } }); </script> |