Bootstrap modals renderas fel på iOS när det virtuella tangentbordet visas

I mobil versionen av Safari finns en bugg som gör att en Bootstrap modal med ett input fält renderas fel när det virtuella tangentbordet visas. Tangentbordet skjuter upp/ner den mörka bakgrunden och visar innehållet som ligger bakom modal:en. Se ett exempel här: https://github.com/twbs/bootstrap/issues/9023

Bootstrap tänker inte fixa detta då detta är en bugg i mobileSafari. Så tills Safari har uppdaterats kan man göra som den här killen: http://www.abeautifulsite.net/blog/2013/11/bootstrap-3-modals-and-the-ios-virtual-keyboard/

I js fil:

// iOS check...ugly but necessary
if( navigator.userAgent.match(/iPhone|iPad|iPod/i) ) {

    $('.modal').on('show.bs.modal', function() {

        // Position modal absolute and bump it down to the scrollPosition
        $(this)
            .css({
                position: 'absolute',
                marginTop: $(window).scrollTop() + 'px',
                bottom: 'auto'
            });

        // Position backdrop absolute and make it span the entire page
        //
        // Also dirty, but we need to tap into the backdrop after Boostrap 
        // positions it but before transitions finish.
        //
        setTimeout( function() {
            $('.modal-backdrop').css({
                position: 'absolute', 
                top: 0, 
                left: 0,
                width: '100%',
                height: Math.max(
                    document.body.scrollHeight, document.documentElement.scrollHeight,
                    document.body.offsetHeight, document.documentElement.offsetHeight,
                    document.body.clientHeight, document.documentElement.clientHeight
                ) + 'px'
            });
        }, 0);

    });

}

Exemplet använder JQuery.