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?
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.
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.
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.
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.
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
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With