Disable IOS Magnifier on Sortable List

by bakhshi

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
This is a minimal sample to show how magnifying glass on ipad would appear despite using '-webkit-touch-callout:none'.
<ol>
    <li>long hold any part of the screen to see that the magnifier does not appear. All good!</li>
    <li>touch focus to create a focused text box </li>
    <li>type something</li>
    <li>click the blue DIV to remove the text box</li>
    <li>observe that the if you long hold anything on screen, the magnifier appears.</li>
    <li>ALSO, note that it does not go away even when you refresh the page. You have to close the tab and open it again to get rid of it! (wasted lot's of my time to figure it out)</li>
</ol>
<button class="toggle">focus</button>
<div class="stuff">this is some text which would appear on the div</div>

CSS

ol{
    list-style-type:decimal;
    margin:40px;
}
* {
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    -webkit-user-modify: none;
    -webkit-highlight: none;
}
*:not(input){
    -webkit-user-select: none;
       -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.stuff {
    width:100px;
    height:100px;
    float:left;
    background-color:blue;
    color:white;
    border:solid 1px yellow;
}

JavaScript

$('#container').sortable({
    items: '.item:not(.fixed)'
});
$('#container').disableSelection();
$('.toggle').click(function () {
    var $input = $('<input type="text" value="type here">');
    $(document.body).append($input);
    $('input').focus();
    $('input')[0].setSelectionRange(0, 10);

    $('input').keyup(function (e) {
        var self = $(e.target);
        if (e.which === 13) setTimeout(function () {
            self.remove();
        });
    });
    
});

$('.stuff').click(function(){
    $('input').attr('readonly', 'readonly');
    setTimeout(function(){
        $('input').removeAttr('readonly');
    });
})