Select element cause a scroll to top of the page on iOS devices

Question

I have a Bootstrap website with a <select> element inside a modal.

My problem is that in iOS (tried on iPhone 5) when I try to open the select to choose an option the background content (behind modal) automatically scrolls up to the top of the page.

I get this error on Safari and Google Search, instead no error on Chrome and Mercury Browser.

Does anyone know the reason and the solution of this problem? Thanks

Answer 1

I have the same issue and found solution that really solves this problem:

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);
    });
}

Hope this would be helpful for others who will have same problem.