AJAX成功/错误消息在Chrome for iOS上无法正常运行

Question

我最近实现了一个通过AJAX处理到API的表单。表单有两个消息div，显示成功或错误状态的'display：none'。提交脚本适用于chrome，firefox和Safari for desktop。但是，在Chrome for iOS上，两条消息都会显示（没有正确的样式），根本不会与表单进行交互。

这是为什么？如果这是Chrome for iOS中的样式或AJAX / Javascript不兼容，我似乎无法解决。如果有人能在这里帮助我，我将不胜感激。我附上了一个问题的例子。

$('.contactForm').submit(function(event){
    event.preventDefault();
    if ($('.contactForm')[0].checkValidity()) {
        var URL = '';
        var data = {
            firstName: $('#firstName').val(),
            lastName: $('#lastName').val(),
            contactNumber: $('#contactNumber').val(),
            emailAddress: $('#emailAddress').val()
        };
        $.ajax({
            type: 'POST',
            url: URL,
            dataType: 'json',
            contentType: 'application/json',
            data: JSON.stringify(data),
            success: function () {
                $('.success-message').show();
                $('#firstName').val('');
                $('#lastName').val('');
                $('#contactNumber').val('');
                $('#emailAddress').val('');
            },
            error: function () {
                $('.error-message').show();
            }
        });
    }
});

.contact-form {
  margin: 0 15px;
}

.success-message {
  display: none;
  width: 100%;
  margin: 10px 0;
  padding: 5px;
  background-color: #81b26b;
  color: #fff;
  border: 2px solid #7aa864;
  border-radius: 5px;
}

.success-message p,
.error-message p {
  margin: 0;
  font-size: 14px;
  font-weight: 300;
}

.error-message {
  display: none;
  width: 100%;
  margin: 10px 0;
  padding: 5px;
  background-color: #ef2917;
  color: #fff;
  border: 2px solid #b02e0c;
  border-radius: 5px;
}

.contactForm {
  margin: 0 auto;
}

.contact-us form input {
    width: 80%;
    height: 35px;
    margin-bottom: 10px;
    padding: 0 10px;
    display: block;
    border: 2px solid #aeaeae;
    border-radius: 5px;
    transition: .5s
}

.contact-us form input:focus {
    outline: 0;
    border: 2px solid #f06530
}

.contact-us form input::placeholder {
    opacity: 0
}

.contact-us form .wire-cta {
    background-color: rgba(0, 0, 0, 0);
    color: #f06530
}

.contact-us button {
    margin: 0 5px 10px 0
}

.submit {
    background-color: #f06530;
    color: #fff;
    font-weight: 300;
    margin-right: 10px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form class="contactForm">
                        <div class="user-messages">
                          <div class="success-message">
                            <p>
                                Thanks for your interest, we look forward to speaking with you soon!
                            </p>
                          </div>
                          <div class="error-message">
                            <p>
                                There seems to be an issue, please re-submit the form or contact us direct.
                            </p>
                          </div>
                        </div>
                        <label for="firstName">First Name:</label>
                        <input type="text" name="firstName" id="firstName" placeholder="First Name" required/>
                        <label for="lastName">Last Name:</label>
                        <input type="text" name="lastName" id="lastName" placeholder="Last Name" required/>
                        <label for="contactName">Contact Number:</label>
                        <input type="tel" name="contactNumber" id="contactNumber" placeholder="Contact Number" pattern="^(\+44\s?7\d{3}|\(?07\d{3}\)?)\s?\d{3}\s?\d{3}$" required/>
                        <label for="emailAddress">Email Address:</label>
                        <input type="email" name="emailAddress" id="emailAddress" placeholder="Email Address" required/>
                        <button type="submit" class="btn click submit">Get in touch</button>
                        <button type="reset" class="btn wire-cta">Clear</button>
                      </form>