Can't type in text into input fields on mobile, but works on desktop

Question

I placed a jQuery colorbox that brings up a text input field, but for some reason I cannot type in the input field on my mobile. But it works on my desktop. When I put cursor on some field it doesn't places on input field. It starts some loading instead. And then brings me back to default position (colorbox is still open and I can't place cursor on text fields. The only way I can place cursor and text into the field is holding some time on text field. Then "Paste" option arises. So I can paste text in text fields, but I cannot type in.

---

HTML (a form that appears in colorbox):

<div class="compare" style="margin-top: 20px;"><a id="fast_order" href="#fast_order_form" class="button" />Купить в 1 клик</a></div>    
    <div style="display:none">
        <div id="fast_order_form">       
            <input id="product_name" type="hidden" value="<?php echo $heading_title; ?>">
            <input id="product_price" type="hidden" value="<?php echo ($special ? $special : $price); ?>">
            <div class="fast_order_center"><?php echo $heading_title; ?> — ваш заказ</div>

        <div class="fast_order_left">
        <p>Имя:</p>
        <p>Телефон:</p>
        <p>Комментарий:</p>
        </div>

        <div class="fast_order_right">
        <p><input type="text" id="customer_name"/></p>
        <p><input type="text" id="customer_phone"/></p>
        <p><input type="text" id="customer_message"/></p>
        </div>

        <div class="fast_order_center">
        <p id="fast_order_result">Пожалуйста, укажите ваше имя и телефон</p>
        <button class="fast_order_button"><span>Подтвердить</span></button> 
        </div>
    </div>
</div>

---

CSS (CSS for this colorbox form):

#fast_order_form .fast_order_left {
  display: inline-block;
  width: 29%;
  text-align: right;
}

#fast_order_form .fast_order_right {
  float: right;
  display: inline-block;
  width: 68%;
  text-align: left;
}
#fast_order_form .fast_order_right p {
  margin-bottom: 15px;
  padding: 0px;
}
#fast_order_form .fast_order_center {
  text-align: center;
  margin-bottom: 20px;
  margin-top: 10px;
}
#fast_order_form #fast_order_result {
  color: #aaa;
  margin-bottom: 14px;
}
#fast_order_form #fast_order_result .fast_order_error {
  color: #f00;
}
#fast_order_form #fast_order_result .fast_order_success {
  color: #00d12a;
}
#fast_order_form p {
  margin-bottom: 22px;
  padding: 0px;
}

#fast_order_form input {
  margin: 0px;
  padding: 0px;
  height: 20px;
  width: 220px;
}

#fast_order_form .fast_order_button {
  font-size: 17px;
  cursor: pointer;
  height: 40px;
    width: 220px;
}

---

Colorbox button click handler:

$(document).ready(function () {
    $('#fast_order').colorbox({href:"#fast_order_form",inline:true, width:"650px", height:"330px", class: "colorbox", title:" "});
    $('#fast_order_form .fast_order_center button').click(function () {
      var product_name = $('#product_name').val(); 
      var product_price = $('#product_price').val();
      var customer_name = $('#customer_name').val();
      var customer_phone = $('#customer_phone').val();
      var customer_message = $('#customer_message').val();
      $('#result').html('Обрабатываем введенные данные..');
     // $.post('./fast_order.php', { 'product_name': product_name, 'product_price': product_price, 'customer_name': customer_name, 'customer_phone': customer_phone, 'customer_message': customer_message }, function (data) { if (data == 'empty') { $('#fast_order_result').html('<span class="fast_order_error">Обязательно укажите ваше имя и телефон, иначе мы не сможем вам перезвонить!</span>'); } else { $('#fast_order_result').html('<span class="fast_order_success">Ваш заказ успешно оформлен!</span><br /><span>Мы перезвоним вам в течение дня. <a onclick="$(window).colorbox.close();">Закрыть</a> это окно?</span>'); } });
    $.post('http://chico.esy.es/fast_order.php', { 'product_name': product_name, 'product_price': product_price, 'customer_name': customer_name, 'customer_phone': customer_phone, 'customer_message': customer_message }, function (data) { if (data == 'empty') { $('#fast_order_result').html('<span class="fast_order_error">Обязательно укажите ваше имя и телефон, иначе мы не сможем вам перезвонить!</span>'); } else { $('.fast_order_button').css('display','none'); $('#fast_order_result').html('<span class="fast_order_success">Ваш заказ успешно оформлен!</span><br /><span>Мы перезвоним вам в течение дня. <a onclick="$(window).colorbox.close();">Закрыть</a> это окно?</span>'); } });
    });
});

---

Update:

I found the code fragment that causes problem, but can't figure out whats wrong.

<script type="text/javascript">
        jQuery.colorbox.settings.maxWidth  = '95%';
        jQuery.colorbox.settings.maxHeight = '95%';

        var resizeTimer;
        function resizeColorBox()
        {
            if (resizeTimer) clearTimeout(resizeTimer);
            resizeTimer = setTimeout(function() {
                if (jQuery('#cboxOverlay').is(':visible')) {
                    jQuery.colorbox.load(true);
                }
            }, 300);
        }

        jQuery(window).resize(resizeColorBox);
        window.addEventListener("orientationchange", resizeColorBox, false);
    </script>

For example, if I set 30000 instead of 300 everything works. Who knows how to properly fix the problem?

Answer 1

Instead of setting a timeout, try waiting to execute the code until after the window is done loading. After all, that's what (I'm assuming) you're trying to accomplish with the timeout. Try something along the lines of:

$(document).ready(function(){

    //your script here

});

If this doesn't work, you could always put your script on a timeout within .ready(). That way it wouldn't have to be as long a timeout in order to still work.