strange droppable() bug on iPad, works on iPhone

Question

I've tried various web searches, but I can't seem to find anything that relates to my problem.

To quickly delineate the problem:

1. HTML5 Cordova iOS app (7.1 -> 8.1)
2. uses draggable elements
3. I only have issues on the iPad, not on the iPhone
4. The HTML5 app itself works flawlessly in a web-browser

The app itself is a biology app that teaches translation - decoding RNA into a amino acid sequence, i.e. a protein.

For this, the user sees the sequence and drags the correct amino acid onto it. The amino acid is a draggable element and the target div is a droppable. One amino acid at a time a chain is built. Please refer to the screenshot to get an idea (can't embed yet).

https://i.stack.imgur.com/S4UpF.png

In order to fit all screens, I "transform: scale" the app accordingly (fixed size is ~850x550). And to get rid of the associated jQuery bug with draggable (object movement would also change with the scaling factor), I've followed the instructions at http://gungfoo.wordpress.com/2013/02/15/jquery-ui-resizabledraggable-with-transform-scale-set/

// scaling to fit viewport
    // sizing the page
    var myPage = $('.page');
    var pageWidth=myPage.width();
    var pageHeight=myPage.height();

    // sizing the iFrame
    var myFrame = $('.container');
    var frameWidth=myFrame.width();
    var frameHeight=myFrame.height();

    // scaleFactor horizontal
    var horizontalScale=pageWidth/frameWidth;

    // scaleFactor vertiacal
    var verticalScale=pageHeight/frameHeight;

    // global zoomScale variable
    var zoomScale = 1; // default, required for draggable debug

    // if page fits vertically - scale horizontally
    if ((frameHeight * horizontalScale) <= pageHeight) {
        myFrame.css({
            'transform': 'scale('+horizontalScale+')',
            'transform-origin': 'top',
        });

        // adding vertical margin, if possible
        if (pageHeight > frameHeight*horizontalScale) {
            var heightDifference = pageHeight - frameHeight*horizontalScale;
            myPage.css({
                'margin-top': heightDifference/2,
                'height': pageHeight - heightDifference/2, 
            });
        }
        zoomScale = horizontalScale;
    // else scale vertically
    } else {
        myFrame.css({
            'transform': 'scale('+verticalScale+')',
            'transform-origin': 'top',
        });
        zoomScale = verticalScale;
    }

    // draggable + scale transform fixes (http://gungfoo.wordpress.com/2013/02/15/jquery-ui-resizabledraggable-with-transform-scale-set/)
function startFix(event, ui) {
    ui.position.left = 0;
    ui.position.top = 0;
}

function dragFix(event, ui) {
    var changeLeft = ui.position.left - ui.originalPosition.left; // find change in left
    var newLeft = ui.originalPosition.left + changeLeft / zoomScale; // adjust new left by our zoomScale

    var changeTop = ui.position.top - ui.originalPosition.top; // find change in top
    var newTop = ui.originalPosition.top + changeTop / zoomScale; // adjust new top by our zoomScale

    ui.position.left = newLeft;
    ui.position.top = newTop;
}

I've already got a beta version on iTunes connect and it works great on an iPhone. On iPads, however, the droppable area is oddly small and shifted. That is, the div seems to be properly rendered - it is the box with the dashed border.

Has anyone else encountered a similar bug? I really have no idea how to fix it.

Answer 1

I have managed to solve the problem.

The issue was probably based on the viewport meta tag (0.5 scaling) interacting badly with the transform:scale resizing.

Simply removing all viewport meta arguments have solved the problem.