captcha become white after click in iframe on Safari 12.1

[Mathias1111]

Prerequisite:

• Safari 12.1 (14607.1.40.1.4)
• The captcha v2 is embedded as an iframe with a certain width (E.g. 1268px or width=100% on 2560x1600)

What I intended to do:

• I want to solve a reCaptcha v2.

What actually happened:

• When you click into the captcha it's getting "white" and unusable.

How to reproduce:

• create a new reCaptcha v2 checkbox key pair
• set localhost to your domains
• set the site-key in the iframe.html in the data-sitekey attribute
• host the index.html and iframe.html (for example with python)
  • python -m http.server 80

fun facts:

• with a width of 512px the captcha works

example.zip

[usualoma]

@Mathias1111 Thank you for very useful information!

with a width of 512px the captcha works

I've found an evil workaround..

if (window.innerWidth > 512) {
  try {
    window.innerWidth = 512;
  } catch (e) {
    // ignore
  }
}

// then render reCAPTCHA

[gsoulard]

I have exaclty the same issue described by @Mathias1111 But with a width of 512px the captch won't work.

@usualoma How your workaround solve the problem ?

[usualoma]

@gsoulard

In grecaptcha.render, the reCaptcha changes the behavior by referring towindow.innerWidth. So we can solve the problem by assigning a value to window.innerWidth before calling grecaptcha.render.

window.innerWidth = 512;
grecaptcha.render('html_element', {
  'sitekey' : 'your_site_key'
});

[gsoulard]

@usualoma

Thanks a lot it's working now.

[hevian54]

I do not understand this. please help in simple terms how to stop the captcha going white when i click on it

[TGolias-zz]

I'm pretty sure this is an issue with Safari 12.1 concerning how they do repaint logic in nested IFrames, not a Recaptcha issue (It wasn't an issue in Safari 11.1).

Funny enough, you can even re-create this by putting the demo recaptcha site (https://recaptcha-demo.appspot.com/recaptcha-v2-checkbox.php) in an IFrame.

That being said, until Safari fixes it, if anyone is looking for a better workaround than the 512px width on the outer IFrame (that doesn't work for me because I need the outer IFrame to be able to expand beyond that if needed), I found that injecting the following into the header inside the IFrame with the src beginning with https://www.google.com/recaptcha/api2/bframe will fix the issue:

<style type="text/css">.rc-image-tile-wrapper{transition: auto !important}</style>

This is because the recaptcha has a class "rc-image-tile-wrapper" that has:

transition: 0.1s ease;

And apparently something about doing that inside a nested IFrame the way Recaptcha does is it when the outer IFrame is greater than 512px (man, I hate this bug) causes the entire IFrame to be repainted white in Safari 12.1. (Note that I say repainted, because you can actually still interact with the squares and verify button in the Recaptcha control, so if you remembered where all the squares were you can actually still solve it)

Fun Fact: The "Click verify once there are none left" Puzzles actually don't turn white like the others do in Safari 12.1, and after completing a bunch of Puzzles repeatedly, Recaptcha likes to send you to these types of puzzles instead so this can be very fun to track down.

[tamir-eyal]

@gsoulard

In grecaptcha.render, the reCaptcha changes the behavior by referring towindow.innerWidth. So we can solve the problem by assigning a value to window.innerWidth before calling grecaptcha.render.

window.innerWidth = 512;
grecaptcha.render('html_element', {
  'sitekey' : 'your_site_key'
});

@usualoma

Could you think of a way to apply this workaround for pages where there is no dynamic rendering with 'grecaptcha.render'? The captcha is automatically loaded to a div with class "g-recaptcha". example: <div class="g-recaptcha" data-sitekey="your_site_key"></div> Thanks

[orcinus]

I found that injecting the following into the header inside the IFrame with the src beginning with https://www.google.com/recaptcha/api2/bframe will fix the issue

Injecting how? It’s cross domain?

[orcinus]

@usualoma

Could you think of a way to apply this workaround for pages where there is no dynamic rendering with 'grecaptcha.render'? The captcha is automatically loaded to a div with class "g-recaptcha". example: <div class="g-recaptcha" data-sitekey="your_site_key"></div>

Leave the div in place and load the recaptcha dynamically into it from a callback. E.g.

      <script>
        window.innerWidth = 512;
        var RecaptchaOptions = {
           theme : 'white'
        };

        var recaptchaLoadCallback = function() {
          grecaptcha.render('g-recaptcha', {
            'sitekey' : '<yoursitekey>’
          });
        };
      </script>    
      <script src="//www.google.com/recaptcha/api.js?onload=recaptchaLoadCallback&render=explicit" async defer></script>

Note that this workaround doesn’t work in 100% of the cases. I’ve had the white frame show in about 10% of the cases still.

[Casedy]

I have faced up with the issue through ng-recaptcha npm. Fixed the issue by workaround like: recaptcha { display: inline-block; transform: translate3d(0, 0, 0) }

[DanielFrancois]

hi @Casedy did you tested your fix with the latest safari v13.0.2 ? We implemented fixes mentionned here and they do not work anymore on this new version of Safari...

[Casedy]

@DanielFrancois tested precisely on safari v13.0.2. it is on my mac now.

[DanielFrancois]

I confirm, this also worked on my side for safari v13.0.2, many thanks to you @Casedy see you again after the next Safari update :D

[ghost]

This does actually work/improve, the 16 tile version now renders correctly.

[IagoLast]

@Casedy any special reason for the display: inline-block ?

[Casedy]

@IagoLast It is part of my integration. I didn't check without inline-block.

[stevenkovar]

Here is a more specific fix based on the answer from @Casedy: .g-recaptcha-bubble-arrow + div:not([class]) {transform:translate3d(0,0,0)!important;}

[c0mput3rxz]

I have been battling this issue as well I was able to fix the traslation to white on click with the following .g-recaptcha { display: inline-block; transition: auto !important;} /*3x3 9 cell reCaptcha*/

.g-recaptcha-bubble-arrow + div:not([class]) {transform:translate3d(0,0,0)!important;} /*4x4 16 cell reCaptcha*/

But for the life of me I can not get the recaptcha back on screen. My challenge iframe is left: -163px. I have tried everything to bring it back to the center but have been having problems.

[smfr]

Being tracked in WebKit as https://bugs.webkit.org/show_bug.cgi?id=204013 It seems like Google worked around this by using a different animation.

[uriklar]

Hi! I'm trying to inject css to fix this issue, but i'm not sure how can I inject it so it applies inside the captcha challenge iframe?

[uriklar]

Hi @smfr! I see the issue you linked is marked as resolved, also you mention Google worked around this somehow, yet I can still recreate this issue in Safari 13.0.3. Can you clarify the status of this issue (If you know of course..) Thanks 🙏

[JustAnotherSoftwareDeveloper]

@Casedy do you mind sharing the exact css that fixes it for ng-recaptcha? I'm also using ng-recaptcha and I'm running into the same issue.

[JustAnotherSoftwareDeveloper]

For all those who are reading this: My issue was with bootstrap. Specifically, the css

body > * {
  overflow: hidden;
}

was blowing up the captcha. I put in

body > * {
  overflow: visible !important
}

and it worked.