Google Recaptcha 在 iOS Safari 浏览器上做奇怪的事情答案

【问题标题】：Google Recaptcha doing strange things on iOS Safari BrowserGoogle Recaptcha 在 iOS Safari 浏览器上做奇怪的事情
【发布时间】：2018-01-22 22:09:08
【问题描述】：

我认为我的情况有点奇怪...我有一个经过 Google Recaptcha 验证的表格。在使用数据回调和一些 JS 与 recaptcha 进行交互之前，提交按钮被禁用。我只是在我的 iOS 设备上使用 Safari 浏览器试用我的网站，然后我进行了 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 {
  ?>

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>

任何帮助将不胜感激。

【问题讨论】：

刚刚从网站上删除了 Recaptcha 作为临时修复。该表格现在可以在手机和电脑上正常工作。有趣...明天再来讨论这个

标签： javascript php html ios recaptcha

【解决方案1】：

用这个线程上给出的答案解决了这个问题： Fixed positioning/z-index issue in mobile safari

显然我的背景被翻译到页面的前面，掩盖了表单输入和其他内容。

添加此行修复它：

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

【讨论】：