Google Recaptcha faire des choses étranges sur iOS Safari Browser

Question

Je pense que mon cas est un peu bizarre ... J'ai un formulaire qui est vérifié par Google Recaptcha. Le bouton de soumission est désactivé jusqu'à ce que recaptcha ait été interagi avec, en utilisant un rappel de données et certains JS. J'essayais juste mon site sur mon appareil iOS en utilisant le navigateur Safari, et j'ai fait la vérification Recaptcha et un contrôle vert est apparu, comme d'habitude. Puis, quand j'ai défilé, le conteneur div dans lequel se trouvait le formulaire a disparu, puis la forme entière a été grisée. Il semblait que cela soit passé derrière le contexte du site.

C'est une capture d'écran du bug:

Alors, je suis confus pour dire le moins. Je n'ai pas été en mesure de trouver des problèmes similaires dans les recherches que j'ai effectuées. La forme est intégrée avec PHP, voici le 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 { 
    ?> 

L'autre ouvre la page HTML, afficher la page si les conditions ne sont pas remplies. Voici mon 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"); 
} 

Et voici ma forme 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> 

Toute aide serait grandement appréciée.

Answer 1

a résolu le problème avec la réponse donnée sur ce fil: Fixed positioning/z-index issue in mobile safari

Apparemment, mon fond était traduit à l'avant de la page, couvrant les entrées de formulaire et d'autres contenus.

cette ligne fixe Ajout il:

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