[Maksim63]

Здравствуйте.
Возник вопрос по модальным окнам. Я использую Bootstrap 3. При использовании модального окна с элементами input, у него есть проблема – при вызове экранной клавиатуры некорректно отрабатываются элементы с fixed position. Проще говоря, когда тыкаем в input происходят нехорошие рывки. Чтобы обойти эту проблему есть два варианта, первый это задать модальному окну position absolute, а второй – вызвать таймер при событии focus и скорректировать позицию.
Я попробовал с помощью скрипта сделать первый вариант. После открытия модального окна задать позицию absolute. Это работает. Но если документ длинный – модальное окно скроллится вместе с ним, а до и после окна получаются некрасивые большие промежутки.
Чтобы избавится от них можно ограничить скролл, но не знаю как. Поэтому решил сделать так, при открытие окна у него position fixed и оно скроллится в пределах своего размера. При событии focus (когда тыкаем в input) у окна position absolute, что позволяет нормально вызвать клавиатуру и корретно отработать скроллы при заполнении полей input.
Окончательный вариант скрипта такой. Но работает он некорректно. Подскажите как правильнее решить задачу, в какую сторону копать ?

$(document).ready(function(){
    var isiPhone = /iPhone/i.test(navigator.userAgent.toLowerCase());
        if(isiPhone) {
        $('.modal').on('shown.bs.modal', function() {
            $(this)
                .css({
                position: 'absolute',
                marginTop: $(window).scrollTop() + 'px',
                bottom: 'auto',
                });
                 
        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'
            });
        }, 500);
        
        var currentAbsoluteScroll = $(window).scrollTop();
            
             $('.modal').css({
                position: 'fixed',
                marginTop: 'auto',
                bottom: '0',
                });
            
            var currentFixedScroll = $(window).scrollTop();
            
        $('input').on('focus', function() {
                  $('.modal').css({
                    position: 'absolute',
                    marginTop: $(window).scrollTop() + 'px',
                    bottom: 'auto',
                    });
                    $(window).scrollTop(currentAbsoluteScroll);
        });
            
        $('input').on('blur', function() {
                    if (!event.relatedTarget) {
                        $(window).scrollTop(currentAbsoluteScroll);
                    }
                    $('.modal').css({
                        position: 'fixed',
                        marginTop: 'auto',
                        bottom: '0',
                    });
                    $(window).scrollTop(currentFixedScroll);
        });
     });
}});
</script>