How to disable/prevent auto scrolling when input is focused on mobile devices using colorbox popup?

Question

I have a responsive website which opens a contact form popup using colorbox. Everyhting is fine on desktop browsers, issues on mobile devices are:

1. When I swipe/scroll down a little bit the popup the popup scrolls back to the top. When I swipe/scroll a larger amount, no scrolling back happens.
2. (more important) When I focus/touch one of the input fields for the first time, the keyboard appears and the popup scrolls to the top of the popup, so the input field is out of sight. When I focus/touch any other input field after that, no scrolling happens.

This is the (simplified) code produced by colorbox:

    <div id="cboxOverlay" style="opacity: 0.9; cursor: pointer; visibility: visible;"></div>
<div id="colorbox" class="" role="dialog" tabindex="-1" style="display: block; visibility: visible; top: 0px; left: 0px; position: absolute; width: 555px; height: 2453px;">
    <div id="cboxWrapper" style="height: 2453px; width: 555px;">
        <div style="clear: left;">
        <div id="cboxContent" style="float: left; width: 1427px; height: 1818px;">
            <div id="cboxLoadedContent" style="width: 1427px; overflow: auto; height: 1818.08px;">
                <div class="quickform">
                    <form name="form_1071" id="form_1071" method="post" action="https://domain.tld/formu.php" autocomplete="on">
                        <input type="hidden" name="header" value="Contact">
                        <input type="hidden" name="timestamp" value="1667904741" data-label="Timestamp">
                        <input type="hidden" name="contactid" value="">
                        <input type="hidden" name="quickform" value="1071">
                        <input type="hidden" name="index" value="0">
                        <label for="vorname">Name*:
                            <input required="" class=" inputfield" type="text" id="vorname" name="qf_r_name" value="">
                        </label>
                        <label for="email">eMail*:
                            <input required="" class=" inputfield" type="text" id="email" name="qf_r_email" value="">
                        </label>
                        <label for="message">Message*:
                            <textarea required="" class="  inputfield" cols="80" rows="6" id="message" name="qf_r_message"></textarea>
                        </label>
                        <button name="Submit" type="submit">SEND</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

Please let me know if I should provide any other code for I have no idea where to start...

Answer 1

Just found out myself after hours of reserach and testing: In jquery.colorbox-min.js change

reposition:!0 to reposition:!1

to prevent Repositioning of Colorbox if the window's resize event is fired.