ReCaptcha image challenge cut off in mobile webviews

[jwoogerd]

Summary: When initiated from a mobile webview, we're seeing the recaptcha image challenge getting cut off, hiding the submit button.

This appears to be happening for some phone models and not others (e.g. we've gotten reports with an iPhone XS Max and Android phones, but the same user reported that it renders fine on an iPhone 8). Unfortunately, we have not been able to suss out the exact model/OS/browser version(s) that induces this behavior.

Possibly related to https://github.com/google/recaptcha/issues/330.

The user-agent for this example is Mozilla/5.0 (iPhone; CPU iPhone OS 13_1_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148

[ArthurStam]

Have the same issue

[hainguyenp207]

We have same issue.

[hainguyenp207]

Hi @ArthurStam, @jwoogerd . I switched to recaptcha v3. It works well. Very simple to switch, we only change some code lines and integrate key: secret key(backend side) and data key site (frontend side). I spent two days to find a way to fix it. Don't spend more time to edit css or javascript.

[tonyfreed]

Same issue

[lifecoderua]

1 year later, still an issue.

For me doesn't happen on regular pages, but affects RTL.

[snakehill]

Still a major issue. In my case it's due to a negative left value:

If I disable or nullify it, it shows just fine. Maybe it makes the bubble arrow (g-recaptcha-bubble-arrow) end up out of place as it's no longer pointing at the box, but a functioning website obviously is much more important:

It already knows the screen size (as the positioning values adjust accordingly), so it should definitely know when it's (partially) outside the view and stop that from happening.

Also, the negative left value will make it end up outside always, without exception, so that should simply be set to a minimum of 0.

[Tan-Aki]

For me, this issue seems to only occur when I start the page in full screen, and then resize it to mobile with the chrome devtools device toolbar.

If I start the page in mobile, the image selection is displayed properly and is centered.

So, to me, it's a non-issue after all.

[markwaldin]

I had the same problem. I set up recaptcha v2 and added some css to float the captcha right. Once I removed the float it worked properly.

[devzarghami]

Add the following css code and the problem will be solved 🥳🥳

#recaptcha-container
{
  transform: scale(0.77);
  -webkit-transform: scale(0.77);
  transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
}
.g-recaptcha-bubble-arrow
{
  display: none;
}
.g-recaptcha-bubble-arrow + div
{
  position: fixed !important;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}