Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can you prevent 3D touch on an <img> but not tap and hold to save?

On <img> tags on iOS mobile Safari, you can tap and hold on an image to bring up a Save Sheet. You can also 3D touch to pop/peek it.

Can you prevent 3D touch while maintaining the tap and hold functionality?

like image 675
garrettmaring Avatar asked Jun 22 '18 04:06

garrettmaring


People also ask

How do you turn off 3D Touch?

Open Settings and tap Accessibility. Tap Touch. Tap 3D & Haptic Touch. Depending on the device you have, only the 3D Touch or the Haptic Touch option might appear.

What is the difference between 3D Touch and Haptic Touch?

We have already seen iPads use Haptic Touch and many other Android devices. The difference between Haptic Touch and 3D Touch is essentially based on the force of the touch. While the latter is more of a pressure-sensitive pop, Haptic Touch is a long press paired with an electric feedback when you press.

Why has 3D Touch been removed?

The implementation was lacking at first, but over time Apple added more areas within iOS 12 where Haptic Touch worked. During the beta process for iOS 13, it was apparent that 3D Touch was on its way out -- long-presses took priority over 3D Touch actions for things like moving or deleting apps on the homescreen.

Is 3D Touch discontinued?

Apple has all but discontinued Force Touch technology, also known as 3D touch, from its products apart from the trackpad on MacBooks quite some time ago. The technology allowed users to access certain functionality on their devices by pressing on the screen.


2 Answers

Using this CSS stops the prompt from firing on any image and won't disable touch events from buttons or markers with images so they still function as normal.

You can still feel the haptic feedback from the touch event when you long press also, you just won't get the prompt/preview.

#root {
  -webkit-touch-callout: none;
}

You can disable or enable the touch-callout as you wish in your css

like image 51
lys Avatar answered Oct 26 '22 21:10

lys


Adding a draggable attribute doesn't work to disable the 3D/force touch. But disabling pointer-events on the works (on iOS 12.2 at least):

img {
  pointer-events: none;
}

Else you have some documentation about force touch in webkit here: Link to Apple developer site

like image 24
Jonas Sandstedt Avatar answered Oct 26 '22 21:10

Jonas Sandstedt