Bootstrap模式仅在iPad pro上显示灰色屏幕

Question

Bootstrap模式没有正确打开。背景位于页面顶部，模态在页面内部不正确。它在Mac，iphone，android和PC上运行得非常好。但这只会导致Apple的iPad Pro出现问题。到目前为止，我已经尝试了一切，但它没有解决它。我正在分享下面的错误截图。

<div class="col-sm-6 m-t-sm" >
              {% if  artist.id == user.id%}
              <div class="row row-sm  dk" >
                <a href="#" data-toggle="modal" data-target="#artistPlaylists" >
                  <h3 class="font-bold m-b padder-md">Playlists &nbsp; <span class="text-primary">{{artist.playlists.count}}</span>
                    <span class="text-sm m-t-sm pull-right">view all</span>
                  </h3></a>


                </div>
                <div id="artistPlaylists"  class="modal  fade" tabindex="-1" role="dialog">
                  <div class="modal-dialog modal-lg">

                    <!-- Modal content-->
                    <div class="modal-content ">
                      <div class="modal-header ">
                        <button type="button" class="close " data-dismiss="modal">&times;</button>
                        <h4 class="modal-title text-primary">Playlists
                            {%set temp = 0%}
                          {% for song in user.playlists %}
                            {%set temp = song.id%}
                          {%endfor%}
                          {%set temp = temp+1%}
                          <a  href="" data-request="onNewPlaylist" data-request-data="val:'/playlist/playlistPage/{{temp}}'" onclick="changeUrl('/playlist/playlistPage/{{temp}}');$('.modal.in').modal('hide');$('body').removeClass('modal-open');$('.modal-backdrop').remove();" data-request-complete=" $('#artistPlaylists').modal('hide');$('.modal.in').modal('hide');$('body').removeClass('modal-open');$('.modal-backdrop').remove()" data-request-update="'pages-all/sidebar': '#nav','pages-home/playlist/playlistPage':'#currentPage'" >
                            <span class="text-sm m-t-sm m-l-sm">Add New&nbsp;<i class="icon icon-plus"></i></span></a>
                        </h4>
                      </div>
                      <div class="modal-body ">
                        <div class="row">
                          <div class="col-sm-12">
                            {% for song in user.playlists %}
                            <div class="col-xs-6 col-md-4 col-lg-3">
                              {% partial "components/playlistItem" songName=song.name songId=song.id songImage=song.image
                              songFile=song.filename songExtension=song.extension songAlbumId=song.id songUserName=song.artist.username
                              %}
                              <section class="panel panel-default pos-rlt clearfix">
                              <header class="panel-heading">
                               <ul class="nav nav-pills pull-right">
                                 <li>
                                   <a href="#" class="panel-toggle text-muted"><i class="fa fa-caret-down text-active"></i><i class="fa fa-caret-up text"></i></a>
                                 </li>
                               </ul>
                               Preview
                             </header>
                             <div class="panel-body clearfix collapse">
                               {% if song.songs is empty%}
                                  Empty Playlist

                               {% endif %}

                               {% for Psong in song.songs |slice(0, 10) %}
                                  <p>
                                    {{Psong.name}}
                                  </p>

                               {% endfor %}

                             </div>
                           </section>
                            </div>
                            {% endfor %}

                          </div>
                        </div>
                      </div>

                    </div>

                  </div>
                </div>


                {%endif%}
        </div>

模态的背景位于页面顶部，禁用任何活动，并且内容之间显示模态。 抱歉质量不好的图片我无法访问ipad，而且是由其他人发送的。

此外，这是该页面的视图，可在其他任何地方打开。

Answer 1

终于找到修复使用这个答案： https://stackoverflow.com/a/15780841/5704835 虽然仍然无法理解为什么这个问题是专门针对iPad专业版的，并且没有在任何其他设备或浏览器上找到它。