Safari crash on iFrame with login
Safari for 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. External .html content:
<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>
Source for inner.html:
<input type="text" style="width: 100%">
When you click to enter the iframe, the virtual keyboard appears. If you click on the selection box without closing the keyboard first, the browser will crash. Chrome does not exhibit this behavior.
Is there anyone who is a registered Apple developer who can check and report this bug to Apple? Does anyone know how to get around this?
source to share
We came up with a job.
First try to identify iPad iPad:
if (navigator.userAgent && navigator.userAgent.indexOf("AppleWebKit") != -1 && navigator.userAgent.indexOf("Mobile") != -1) {
preventIPadSelectCrashes();
}
Then we need to overlay the top element with a selection:
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 way to store the selectable input position. It just supports the positioning of the input as desired.
source to share