How can I prevent the peak effect (strong pressure's impact with Safari on iPhone 6s) on the "a" element in this code (bootstrap environment)?
<article>
<div class="gall-thumbnail">
<a data-toggle="modal" href="mod1#">
<img src="img.jpg"/>
<p class="text-center caption">Caption</p>
</a>
</div>
<div class="modal fade" id="mod1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h5 class="modal-title text-center">Caption</h5>
</div>
<div class="modal-body">
<img src="img.jpg" class="img-responsive"/>
</div>
</div>
</div>
</div>
</article>The conflict between Safari on iPhone 6s and the bootstrap modal component is causing a display issue with the "peek" effect on the "a" element, showing a different picture instead of the enlarged img.jpg. I would like to either disable the "peek" on the "a" element or ensure that the enlarged img.jpg is shown when strong pressing with Safari on iPhone 6s.