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.

stuyam · Answer 1 · 2016-06-14T17:43:53.897

0

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;
}

edited Jun 14 '16 at 17:43

answered Jun 14 '16 at 13:16

stuyam

9,561
2
21
40

Thank you Yamartino, but it does not work for "strong press" (peek) because it properly works for "normal press and hold" that is another thing: have you other css declaration for "strong press"? – Vincent Jun 14 '16 at 17:08
@Vincent see my updated response above. I actually use both properties when I am trying to disable that type of stuff on Safari. In my pressure.js library I do the following to prevent all of these events that do weird actions like that https://github.com/yamartino/pressure/blob/master/src/adapter.js#L41 – stuyam Jun 14 '16 at 17:47
Sorry Yamartino, your second solution does not work in my code. The problem is only with Safari on iOs. – Vincent Jun 15 '16 at 08:29
@Vincent that was for safari on iOS, that didn't work? – stuyam Jun 15 '16 at 19:38
Peak & pop works only with Safari on iPhone 6s and I have the problem only with Safari on iPhone 6s. – Vincent Jun 16 '16 at 06:24
So I did some more research @Vincent and the -webkit-touch-callout:none; does in fact stop the the peek and pop on tags. However when you wrap a link around an image and try to apply the -webkit-touch-callout:none; to both the and the will still peek and pop for some reason. I can't tell if this is a Safari bug or not – stuyam Jun 17 '16 at 15:56
Maybe it is a Safari bug. – Vincent Jun 18 '16 at 05:19
It also might be a feature, ensuring that `` links function consistently. Be careful trying to circumvent this potential bug with javascript or non-link elements, as you are likely to lose some of the inherent benefits of a link element. – Jason Dec 29 '16 at 19:14

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

1 Answers1