Google Recaptcha在iOS上执行奇怪的事情Safari浏览器

Question

我认为我的情况有点奇怪...我有一个经过Google Recaptcha验证的表单。提交按钮被禁用，直到recaptcha已被交互，使用数据回调和一些JS。我只是使用Safari浏览器在我的iOS设备上尝试了我的网站，然后我进行了Recaptcha验证，并且出现了一个绿色检查，就像平常一样。然后当我滚动时，表单所在的容器div消失了，然后整个表单变灰了。它似乎落后于网站背景。

这是错误的截图：

所以，我很困惑，至少可以说。我在搜索过程中没有发现任何类似的问题。形式与PHP集成，下面的代码：

<?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 { 
    ?> 

的其他人打开了页面的HTML，显示的页面，如果条件不具备。这里是我的脚本：

$(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"); 
} 

这是我的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> 

任何帮助将不胜感激。

Answer 1

与此线程给出了答案解决它： Fixed positioning/z-index issue in mobile safari

显然，我的背景是被翻译页面的前面，覆盖了表单输入等内容。

加入这一行固定它：

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