javascript alert freezing iOS Browsers

Question

I'm facing some strange bug while developing a webapp in jquery-mobile. When I prompt an alert, if i touch some input of the page, iOS Safari & Chrome gets totally freezed and I only can close them with the Task Manager.

I'm very confused if it's apple fault or it's mine.

Some piece of code:

$('.checkout-comprar-button').click(function(){                 
  alert("hola!!!");
});

This is the div of the event:

<div class="grp-bottombar-button checkout-comprar-button" style="width: 50% !important; float: right !important; display: block !important; padding-top: 12px;">
        <span class="green-desplegable grp-bottombar-button-text">
             <? echo _("checkoutcreditcard.seguircompra"); ?>
        </span>
</div>

And this is one of the inputs:

<div class="checkout-datos-numero checkout-first-form checkout-form-field-container">
   <div class="checkout-field">
      <input type="tel" placeholder="<? echo _('creditcard.numero'); ?>" name="" id="checkout-num-tarjeta" maxlength="30" />
   </div>
</div>

After the alert is shown, if I want to focus some of the inputs, the browser freezes. When I force close Safari, this is the message that console gave me:

<Warning>: MobileSafari[2985] has active assertions beyond permitted time: 
    {(
        <BKProcessAssertion: 0x1e857480> identifier: Suspending process: MobileSafari[2985] permittedBackgroundDuration: 10.000000 reason: suspend owner pid:26 preventSuspend  preventThrottleDownCPU  preventThrottleDownUI 
    )}
<Warning>: Forcing crash report of MobileSafari[2985]...

Any help? Thank you

Answer 1

There appears to be a MAJOR bug in the iOS browser. When I use the alert after an onChange event in a select the alert pops up with an OK button. Clicking the OK button doesn't do anything else. In face, the ENTIRE browser locks up. The only resolution is to hit the home or power button and kill the browser app.

As of December 13th, 2013 this issue is not fixed. I've submitted to Apple. Others have as well. I can't figure out why they are so slow to fix this MAJOR issue.

Answer 2

I used the code posted in the question and was unable to replicate the problem; However, I have had similar problems before and found a solution.

I ran into a similar problem when using Mobile Safari inside a web view in a native iOS app. Wrapping the alert message in a setTimout solved the deadlock issue for me. There was a question asked on this topic and it was answered here: Calling [JSValue callWithArguments:] locks UI when alert() is called

using this solution, your piece of code would look like this:

$('.checkout-comprar-button').click(function(){                 
   window.setTimeout(function () {alert("hola!!!");},0);
});