My $.ajax request stopped working properly on iOS 11.3

Question

This code used to work just fine and fast for years.

Given that $.ajax does not receive any file data, as of update to iOS 11.3 this $.ajax seems to work very slowly up to 20 seconds to submit a simple text-only form when tested on iOS browser.

But if the file element passes file data, the $.ajax works just fine in both cases and just as fast as expected.

HTML ---
<form enctype="multipart/form-data" id="chatform" method="post">
    <input type="file" name="pic" id="pic" class="hidden" />
    <textarea name="chattextarea" id="chattextarea" rows="3" cols="10"></textarea>
    <input type="button" value="Send" onclick="sendMessage();" />
</form>

JavaScript ---
function sendMessage() {
    var formData = new FormData($("#chatform")[0]);
    $.ajax({
        url: 'send.php',
        type: 'POST',
        data: formData,
        async: true,
        cache: false,
        contentType: false,
        processData: false,
        success: function (returndata) {
            /* some success message */
        }
    });
}

Is this an iOS 11.3 bug?

----- EDIT -----

Yes indeed it is not only iOS 11.3 bug, but also a Safari 11.1 bug. So far I tested these environments and replicated the bug:

1. Mac OS, Safari
2. iOS, Safari
3. iOS, Chrome
4. iOS, WKWebView (hybrid app)

I wrote a simple workaround, please check my answer and let me know if you have a cleaner solution.

Answer 1

This function works on iOS 11.3, iOS 10.2 and windows Chrome 65.0.3325.181. Can someone help to test on other browsers?

function formDataFileFix(formData) {
    try {
        if (formData.keys) {
            var formKeysToBeRemoved = [];
            for (var key of formData.keys()) {
                var fileName = null || formData.get(key)['name'];
                var fileSize = null || formData.get(key)['size'];
                if (fileName != null && fileSize != null && fileName == '' && fileSize == 0) {
                    formKeysToBeRemoved.push(key);
                }
            }
            for (var i = 0; i < formKeysToBeRemoved.length; i++) {
                formData.delete(formKeysToBeRemoved[i]);
            }
        }
    }
    catch(err) {
        console.log(err.message);
    }
}

var formData = new FormData($(formID)[0]);
formDataFileFix(formData);

Answer 2

Instead of deletion, I disabled the empty file inputs from the formData before class creation:

if(!file.val()){
   file.attr('disabled', true);
}