How to disable peak & pop effect (strong pressure's effect with Safari on iPhone 6s)

Question

I need to disable peak effect (strong pressure's effect with Safari on iPhone 6s) on "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">&times;</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>

I need to disable it because if strong pressing with Safari on iPhone 6s then bootstrap's "modal" component is here in conflict with "peak", and it shows picture other than enlarged img.jpg.

So it would be nice to disable "peek" on "a" element or to show enlarged img.jpg when strong pressing with Safari on iPhone 6s.

Answer 1

If you would like to disable peeking when you "strong" press an element on iOS you can set the webkit-user-select and the webkit-touch-callout property to none in css. If you are trying to prevent it on all "a" tags you could do something like this:

a{
  -webkit-user-select:none;
  -webkit-touch-callout: none;
}