Bootstrap modal doesn't opens correctly. Background is on top of page and modal is fixed inside the page incorrectly. It works perfectly fine on Mac,iphone,android and PC. But only causes problem with Apple's iPad Pro. So far I have tried everything but it doesn't solves it. I am sharing screenshots of error below.
<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 <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">×</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 <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>
The background of modal is on top of page disabling any activity and modal is shown between content. Sorry for bad quality image I don't have access to ipad and It was sent by someone else.
Also this is the view supposed for this page which opens everywhere else.
