title: Bootstrap modal bug when open ONLY on iphone/ipad
body: <p>I observe a very strange bug on iphone (and ipad) when I open a Bootstrap modal.
  The black (semi opaque) background is well show, but the modal is not display. There is nothing visible and the user is blocked.</p>
  <p>I'm using the following lib:</p>
  <pre><code>&lt;script src=&quot;//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;link href=&quot;//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; id=&quot;bootstrap-css&quot;&gt;
  &lt;script src=&quot;//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p>I already understood a possible reason, I include all the content of the modal inside an html table. In the follwing exemple, we can see two working case and the one concerned by the bug:</p>
  <pre><code>    &lt;!-- debug popup --&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;fr&quot; class=&quot;no-js&quot;&gt;
  
  &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot;&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;meta name=&quot;keywords&quot; content=&quot;test&quot; /&gt;
      &lt;meta name=&quot;author&quot; content=&quot;Kaio Gaming&quot; /&gt;
      &lt;link rel=&quot;shortcut icon&quot; href=&quot;https://www.blabl.fr/favicon.ico&quot; sizes=&quot;96x96&quot; type=&quot;image/x-icon&quot; /&gt;
  
      &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js&quot;&gt;&lt;/script&gt;
      &lt;script language=&quot;JavaScript&quot; src=&quot;/membreDev/js/modernizr.js?version=1.0.3a&quot;&gt;&lt;/script&gt;
  
  
      &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js&quot;&gt;&lt;/script&gt;
  
      &lt;link href=&quot;//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; id=&quot;bootstrap-css&quot;&gt;
      &lt;script src=&quot;//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
  
  
      &lt;link href=&quot;https://cdn.jsdelivr.net/npm/fork-awesome@1.1.7/css/fork-awesome.min.css&quot; rel=&quot;stylesheet&quot;&gt;
      &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js&quot;
          integrity=&quot;sha256-2JRzNxMJiS0aHOJjG+liqsEOuBb6++9cY4dSOyiijX4=&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  
      &lt;title&gt;debug popup&lt;/title&gt;
      &lt;meta name=&quot;description&quot; content=&quot;debug popup de Kaio Gaming&quot; /&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class=&quot;container theme-showcase&quot; role=&quot;main&quot;&gt;
          &lt;div class=&quot;jumbotron&quot;&gt;
              &lt;center&gt;
                  &lt;h1&gt;debug popup&lt;/h1&gt;
              &lt;/center&gt;
              &lt;div class=&quot;row float-right&quot;&gt;
                  &lt;a type=&quot;button&quot; href=&quot;../index.php&quot; class=&quot;btn btn-danger&quot;&gt;&amp;larr;&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;main role=&quot;main&quot;&gt;
          &lt;div class=&quot;container marketing&quot;&gt;
              &lt;h1&gt;Working case #1: button and modal content directly in HTML root code&lt;/h1&gt;
              &lt;button type=&quot;button&quot; class=&quot;btn btn-danger col-12&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;
                  title=&quot;Faire une demande&quot; id=&quot;btn-demande-acces&quot; data-toggle=&quot;modal&quot; data-target=&quot;#popup-demande-acces&quot;
                  data-backdrop=&quot;static&quot; data-keyboard=&quot;false&quot;&gt;
                  Demander un accès
              &lt;/button&gt;
              &lt;div class=&quot;modal fade&quot; id=&quot;popup-demande-acces&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;&quot;
                  aria-hidden=&quot;true&quot; style=&quot;display: none;&quot;&gt;
                  &lt;div class=&quot;modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable&quot; role=&quot;document&quot;&gt;
                      &lt;div class=&quot;modal-content&quot;&gt;
                          &lt;div class=&quot;modal-header&quot;&gt;
                              &lt;center&gt;
                                  &lt;h4 class=&quot;modal-title&quot; id=&quot;modTitle&quot;&gt;Faire une demande d'accès&lt;/h4&gt;
                              &lt;/center&gt; &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt;&lt;span
                                      aria-hidden=&quot;true&quot;&gt;×&lt;/span&gt;&lt;/button&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;modal-body&quot;&gt;
                              &lt;form method=&quot;post&quot; action=&quot;javascript:void(0);&quot; id=&quot;submitModalDemandeAcces&quot;&gt;
                                  &lt;div class=&quot;form-group hide&quot;&gt;
                                      &lt;label for=&quot;Demandeur&quot; class=&quot;control-label&quot;&gt;Demandeur:
                                      &lt;/label&gt;
                                      &lt;select required=&quot;&quot; value=&quot;1&quot; class=&quot;custom-select&quot; id=&quot;Demandeur&quot;
                                          placeholder=&quot;Demandeur à définir&quot; name=&quot;Demandeur&quot;&gt;
                                          &lt;option value=&quot;blablabla&quot;&gt;blablabla (Exemple)&lt;/option&gt;
                                      &lt;/select&gt;
                                  &lt;/div&gt;
                                  &lt;div class=&quot;form-group&quot;&gt;
                                      &lt;label for=&quot;Type&quot; class=&quot;control-label&quot;&gt;Type:
                                      &lt;/label&gt;
                                      &lt;select value=&quot;1&quot; class=&quot;custom-select&quot; id=&quot;Type&quot; required=&quot;&quot;
                                          placeholder=&quot;Type à définir&quot; name=&quot;Type&quot;&gt;
                                          &lt;option value=&quot;1&quot;&gt;Example&lt;/option&gt;
                                      &lt;/select&gt;&lt;/div&gt;
                                  &lt;div class=&quot;form-group&quot;&gt;
                                      &lt;label for=&quot;Details_de_la_demande&quot; class=&quot;control-label&quot;&gt;Détails de la demande:
                                      &lt;/label&gt;
                                      &lt;input type=&quot;text&quot; class=&quot;form-control&quot; value=&quot;&quot; name=&quot;Details_de_la_demande&quot;
                                          id=&quot;Details_de_la_demande&quot; required=&quot;&quot;
                                          placeholder=&quot;Détails de la demande à définir&quot;&gt;
                                  &lt;/div&gt;
                                  &lt;div class=&quot;modal-footer&quot;&gt;
                                      &lt;center&gt; &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot; title=&quot;Ajouter ➕&quot;&gt;Ajouter
                                              ➕&lt;/button&gt;
                                          &lt;button id=&quot;demande_annulation&quot; type=&quot;button&quot; class=&quot;btn btn-default&quot;
                                              data-dismiss=&quot;modal&quot;&gt;Annuler ⨯&lt;/button&gt; &lt;/center&gt;
                                  &lt;/div&gt;
                              &lt;/form&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
  
              &lt;h1&gt;Working case #2: the button is in the table, but the content is outside the table&lt;/h1&gt;
              &lt;div class=&quot;table-responsive &quot;&gt;
                  &lt;table class=&quot;table table-bordered table-striped&quot;&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th&gt;
                                  &lt;center&gt;Membre&lt;/center&gt;
                              &lt;/th&gt;
                              &lt;th&gt;
                                  &lt;center&gt;&lt;/center&gt;
                              &lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                          &lt;tr class=&quot;rows countLineId row_1&quot;&gt;
                              &lt;td&gt;&lt;span title=&quot;membre-97&quot;&gt;ssj (ssj)&lt;/span&gt;&lt;/td&gt;
                              &lt;td&gt;
                                  &lt;center&gt;&lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot; data-toggle=&quot;modal&quot;
                                          data-target=&quot;#contactModal_97&quot;&gt;Contacter&lt;/button&gt;
                                  &lt;/center&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
  
              &lt;!-- modal body outside the TABLE --&gt;
              &lt;div class=&quot;modal fade&quot; id=&quot;contactModal_97&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;Contacter membre&quot;
                  aria-hidden=&quot;true&quot;&gt;
                  &lt;div class=&quot;modal-dialog modal-lg&quot; role=&quot;document&quot;&gt;
                      &lt;div class=&quot;modal-content&quot;&gt;
                          &lt;div class=&quot;modal-header&quot;&gt;
                              &lt;h5 class=&quot;modal-title&quot; id=&quot;viewMembre&quot; title=&quot;Contact&quot;&gt;
                                  Contacter &lt;a title=&quot;Voir le profil membre&quot;
                                      href=&quot;https://www.blabla.fr/monCompte/maPage.php?pseudo=ssj&quot;&gt;ssj:
                                      ssj&lt;/a&gt;
                              &lt;/h5&gt;
                              &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt;
                                  &lt;span aria-hidden=&quot;true&quot;&gt;×&lt;/span&gt;
                              &lt;/button&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;modal-body&quot;&gt;
                              &lt;ul&gt;
                                  &lt;li&gt;Email: &lt;a href=&quot;mailto:ss@gmail.com&quot;&gt;ss@gmail.com&lt;/a&gt;
                                  &lt;/li&gt;
  
                                  &lt;li&gt;Portable: &lt;a href=&quot;tel:97678&quot;&gt;97678&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;Discord: 0999897&lt;/li&gt;
                                  &lt;li&gt;Adresse postal: &lt;a target=&quot;_blank&quot;
                                          href=&quot;https://www.google.com/maps/place/blabla FRANCE&quot;
                                          title=&quot;Google Maps&quot;&gt;blabla, FRANCE&lt;/a&gt; &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;modal-footer&quot;&gt;
                              &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot; data-dismiss=&quot;modal&quot;&gt;Fermer&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
  
              &lt;h1&gt;ERROR case: the open modal button AND the content is inside the table&lt;/h1&gt;
              &lt;div class=&quot;table-responsive &quot;&gt;
                  &lt;table class=&quot;table table-bordered table-striped&quot;&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th&gt;
                                  &lt;center&gt;Membre&lt;/center&gt;
                              &lt;/th&gt;
                              &lt;th&gt;
                                  &lt;center&gt;&lt;/center&gt;
                              &lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                          &lt;tr class=&quot;rows countLineId row_1&quot;&gt;
                              &lt;td&gt;&lt;span title=&quot;membre-96&quot;&gt;ssj (ssj)&lt;/span&gt;&lt;/td&gt;
                              &lt;td&gt;
                                  &lt;center&gt;&lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot; data-toggle=&quot;modal&quot;
                                          data-target=&quot;#contactModal_96&quot;&gt;Contacter&lt;/button&gt;
                                      &lt;div class=&quot;modal fade&quot; id=&quot;contactModal_96&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot;
                                          aria-labelledby=&quot;Contacter membre&quot; aria-hidden=&quot;true&quot;&gt;
                                          &lt;div class=&quot;modal-dialog modal-lg&quot; role=&quot;document&quot;&gt;
                                              &lt;div class=&quot;modal-content&quot;&gt;
                                                  &lt;div class=&quot;modal-header&quot;&gt;
                                                      &lt;h5 class=&quot;modal-title&quot; id=&quot;viewMembre&quot; title=&quot;Contact&quot;&gt;
                                                          Contacter &lt;a title=&quot;Voir le profil membre&quot;
                                                              href=&quot;https://www.blabla.fr/monCompte/maPage.php?pseudo=ssj&quot;&gt;ssj:
                                                              ssj&lt;/a&gt;
                                                      &lt;/h5&gt;
                                                      &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot;
                                                          aria-label=&quot;Close&quot;&gt;
                                                          &lt;span aria-hidden=&quot;true&quot;&gt;×&lt;/span&gt;
                                                      &lt;/button&gt;
                                                  &lt;/div&gt;
                                                  &lt;div class=&quot;modal-body&quot;&gt;
                                                      &lt;ul&gt;
                                                          &lt;li&gt;Email: &lt;a href=&quot;mailto:ss@gmail.com&quot;&gt;ss@gmail.com&lt;/a&gt;
                                                          &lt;/li&gt;
  
                                                          &lt;li&gt;Portable: &lt;a href=&quot;tel:97678&quot;&gt;97678&lt;/a&gt;&lt;/li&gt;
                                                          &lt;li&gt;Discord: 976575&lt;/li&gt;
                                                          &lt;li&gt;Adresse postal: &lt;a target=&quot;_blank&quot;
                                                                  href=&quot;https://www.google.com/maps/place/blabla FRANCE&quot;
                                                                  title=&quot;Google Maps&quot;&gt;blabla, FRANCE&lt;/a&gt; &lt;/li&gt;
                                                      &lt;/ul&gt;
                                                  &lt;/div&gt;
                                                  &lt;div class=&quot;modal-footer&quot;&gt;
                                                      &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;
                                                          data-dismiss=&quot;modal&quot;&gt;Fermer&lt;/button&gt;
                                                  &lt;/div&gt;
                                              &lt;/div&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/center&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/main&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>