Google Recaptcha doing strange things on iOS Safari Browser

Question

I think my case is a bit of an oddity... I have a form that is verified by Google Recaptcha. The submit button is disabled until the recaptcha has been interacted with, using a data-callback and some JS. I was just trying out my site on my iOS device using the Safari browser, and I did the Recaptcha verification and a green check appeared, like normal. Then when I scrolled, the container div that the form was in disappeared, and then the entire form was greyed out. It seemed like it went behind the site background.

This is a screenshot of the bug:

So, I am confused to say the least. I have not been able to find any similar issues in the searches I have done. The form is integrated with PHP, here's the code:

<?php
if (isset($_REQUEST['email'])) {
  if ($_SERVER["REQUEST_METHOD"] === "POST") {
    $recaptcha_secret = "my_secret_key_was_here";
    $response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$recaptcha_secret."&response=".$_POST['g-recaptcha-response']);
    $response = json_decode($response, true);

    if ($response["success"] === true) {
      $to = "someemail@example.com";
      $subject = "Contact Form";
      $firstname = $_REQUEST['firstname'];
      $lastname = $_REQUEST['lastname'];
      $email = $_REQUEST['email'];
      $comments = $_REQUEST['comments'];

      $message = "First Name: \t";
      $message .= $firstname;
      $message .= "\n";
      $message .= "Last Name: \t";
      $message .= $lastname;
      $message .= "\n";
      $message .= "Email: \t";
      $message .= $email;
      $message .= "\n";
      $message .= "Message: \t";
      $message .= $comments;
      $message .= "\n";

      mail($to, $subject, $message, "From:" . $email);
      header("Location: sent.html");
    } else {
      header("Location: failed.html");
    }
  }
} else {
  ?>

The else opens up to the page HTML, displaying the page if the conditions are not met. Here's my script:

$(document).ready(function() {
  $('#submitbutton').prop( "disabled", true ).attr('title', "Please check the catchpa before submitting the form");
});

var enableBtn = function() {
  $('#submitbutton').prop( "disabled", false ).attr('title', "Submit");
}

And here's my form HTML:

    <form method="post" action="new.php">

      <label for="firstname">First Name:</label>
      <input name="firstname" required type="text" />

      <label for="lastname">Last Name:</label>
      <input name="lastname" required type="text" />

      <label for="email">Email Address:</label>
      <input name="email" required type="email" />

      <label for="comments">Message:</label>
      <textarea name="comments" required></textarea>

      <div class="center-captcha">
        <div class="g-recaptcha" data-sitekey="my_site_key_was_here" data-callback="enableBtn"></div>
      </div>

      <button class="send-button" id="submitbutton">Submit</button>
    </form>

Any help would be greatly appreciated.

Just removed the Recaptcha from the site as a temporary fix. The form now works fine on mobile and computer. Interesting... Coming back to this tomorrow — empoweredev, Aug 15 '17 at 01:28

score 0 · Accepted Answer · answered Aug 15 '17 at 21:58

Solved it with the answer given on this thread: Fixed positioning/z-index issue in mobile safari

Apparently my background was being translated to the front of the page, covering up the form inputs and other content.

Adding this line fixed it:

-webkit-transform: translate3d(0,0,0);

Google Recaptcha doing strange things on iOS Safari Browser

1 Answers1