Safari Crashing on iFrame with input

Question

Safari on iOS 8 User Agent: Mozilla/5.0 (iPad; CPU OS 8_3 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/8.0 Mobile/12F69 Safari/600.1.4)

We have two files named outer.html and inner.html. The contents of outer.html are:

    <select>
  <option></option>
  <option>Value 1</option>
  <option>Value 2</option>
</select>

<br/><br/>

<iframe src="inner.html" style="width: 150px; height: 40px; overflow: hidden; border: none;"></iframe>

The source to inner.html is:

    <input type="text" style="width: 100%">

When you click on the input within the iframe the virtual keyboard appears. If you click on the select box without closing the keyboard first, the browser will crash. Chrome does not exhibit this behavior.

Is there anyone that is a registered Apple Developer that can verify and report this bug to Apple? Does anyone know of a way to work around this?

Answer 1

We came up with a work around.

First try to determine if it's iPad Mobile:

if (navigator.userAgent && navigator.userAgent.indexOf("AppleWebKit") != -1 && navigator.userAgent.indexOf("Mobile") != -1) {
      preventIPadSelectCrashes();
}

Next we need to overlay an input on top of the select:

preventIPadSelectCrashes = function() {
    var selectOverlayId = 1;

    jQuery('select').each(function(){
      var select = jQuery(this);

      var selectOverlay = jQuery("<input>", {id: 'selectOverlay' + selectOverlayId, type: 'text', style: 'border: none; background: transparent;', 'z-index': overlayZIndex});
      select.after(selectOverlay);

      jQuery(document).on("focus", '#selectOverlay' + selectOverlayId, function(){
        jQuery(this).blur();
        jQuery(this).css('z-index', -1000);
        select.focus();
      });

      select.on("blur", function() {
        selectOverlay.css('z-index', overlayZIndex);
      });

      maintainSelectOverlay(select, selectOverlay);

      selectOverlayId++;
    });
  };

Finally there is a method to maintain the position of the input over the select. It just maintains the positioning of the input over the select.