JQuery UI (Draggable) + TouchPunch moving elements when losing/gaining focus

Question

I've just gotten some draggable screens working on an app I'm working on through jqueryui & touchpunch, but on mobile when the screen loses and comes back into focus, the elements used by jqueryui jump all over the place and not sure what's causing it. It's fine if none of the elements are interacted with before the loss of focus, only after they've been interacted with. Any help would be appreciated!

$(document).ready(function(){   // Draggable Elements
    var overviewOpen = true;
    var assignmentOpen = false;
    
    $(function(){   // Job Overview resize
        $('#overviewResize').draggable({ 
            handle: "#overviewHeader",
            axis: "y",
            revert: true,
            revertDuration: 0,
            start: function(){ $(this).css("transform", "translate(0px, 0px)"); },
            stop: function(){
                if (overviewOpen == false){
                    $('#overviewResize').css("transform", "translate(0px, -" + ($(window).height() - 196) + "px)");
                    $('#overviewJobID').css("display", "flex");
                    overviewOpen = true;
                } else {
                    $('#overviewResize').css("transform", "translate(0px, " + ($(window).height() - 196) + "px)");
                    if (assignmentOpen == true){
                        $('#assignmentResize').css("transform", "translate(0px, 0px)");
                        assignmentOpen = false;
                    }
                    overviewOpen = false;
                }
            }
        });
    });
    $(function(){
        $('#assignmentResize').draggable({ 
            handle: "#assignmentHeader",
            axis: "y",
            revert: true,
            revertDuration: 0,
            start: function(){ $(this).css("transform", "translate(0px, 0px)"); },
            stop: function(){
                if (assignmentOpen == false){
                    if (overviewOpen == false){
                        $('#overviewResize').css("transform", "translate(0px, 0px)");
                        overviewOpen = true;
                    }
                    $('#assignmentResize').css("transform", "translate(0px, -" + ($(window).height() - 196) + "px)");
                    assignmentOpen = true;
                } else {
                    $('#assignmentResize').css("transform", "translate(0px, " + ($(window).height() - 196) + "px)");
                    assignmentOpen = false;
                }
            }
        });
    });
});

Answer 1

For anyone else with this issue, I figured out that although I'm trying to manipulate my elements css transform, jquery ui adds "top" & "left" to the css as well once it's been placed. My issue was stemming from the fact that when the screen loses focus on mobile, there's a brief window resize that was throwing everything into chaos. Adding $('#element').css("top", ""); to both stop functions for both elements alleviated the problem.

As a side note, this also cleared up all the other weird calculations I had to do to the translate when this was happening.