javascript - Google Recaptcha doing strange things on iOS Safari Browser -
i think case bit of oddity... have form verified google recaptcha. submit button disabled until recaptcha has been interacted with, using data-callback , js. trying out site on ios device using safari browser, , did recaptcha verification , green check appeared, normal. when scrolled, container div form in disappeared, , entire form greyed out. seemed went behind site background.
this screenshot of bug:
so, confused least. have not been able find similar issues in searches have done. form integrated php, here's 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 page html, displaying page if conditions not met. here's script:
$(document).ready(function() { $('#submitbutton').prop( "disabled", true ).attr('title', "please check catchpa before submitting form"); }); var enablebtn = function() { $('#submitbutton').prop( "disabled", false ).attr('title', "submit"); }
and here's 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 appreciated.
solved answer given on thread: fixed positioning/z-index issue in mobile safari
apparently background being translated front of page, covering form inputs , other content.
adding line fixed it:
-webkit-transform: translate3d(0,0,0);
Comments
Post a Comment