How to disable iOS Link Preview with javascript css or html attr

user_4450941 0
Viewed 1426

When you hold on a link in Chrome / Safari with iOS, it displays an annoying link preview, problems comes when i have like a sortable <ul> list items ( with full link inside it ) So if you hold you drag ( drag event present on my <li> if you click/tap you go to the link <a>.

iOS problem: When i hold just when it should start the drag event, this annoying system modal appears, blocking all the drag process and destroying the UX.

I have tried preventing default actions, pointer events none the link inside the element when the drag start, but nothing, keeps appearing

element.sortable.on('drag:start', (e) => {
      e.stopPropagation();
      e.preventDefault();

any ideas how to fix this with (js,css or some html attr ?) thanks in advance

enter image description here

google-chrome dom html javascript ios
1 Answers

This css-style blocks the touch action you are referring to on iOS safari. At the time of question-asking i believe the default popup is the one shown in the picture. But now it navigates to the actual page in a small modal window, in addition to showing some options

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

Navigate to this on iOS for test: https://jsfiddle.net/hygf4Lrk/3/

It blocks both long-press (tap and hold for maybe 1s) and force-touch (press hard but instantly) wich result in the same action of link-preview by default.

user_24773070
Related