Seleziona elemento causa uno scorrimento verso l'alto della pagina su dispositivi iOS

Question

Ho un sito Web Bootstrap con un elemento <select> all'interno di una modale.

Il mio problema è che in iOS (provato su iPhone 5) quando provo ad aprire select per scegliere uno option il contenuto dello sfondo (dietro la modale) scorre automaticamente fino alla cima della pagina.

ottengo questo errore su Safari e Google Search, invece nessun errore su Chrome e Mercurio browser.

Qualcuno conosce il motivo e la soluzione di questo problema? Grazie

Answer 1

Avevo affrontato il problema simile per il dispositivo iPad molto tempo fa. l'utilizzo di event.preventDefault() in javascript aveva risolto il problema.

Answer 2

Ho lo stesso problema e la soluzione trovata che risolve proprio questo problema:

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

Spero che questo sarebbe utile per gli altri che avranno lo stesso problema.