18

I have a very weird problem. In my cordova app on iOS I am getting a pop-up text-select magnifying glass when I long-press anywhere in the app.

Example:

Screenshot showing the select-popover

The bubble at the top is locked to the top of the screen, and follow my x-position when moving my finger from side to side.

I have tried to add the following css which people say should fix my issue:

* {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}

This does not help. Looking at things in the web-inspector, I can confirm that this css is successfully added to everything. I have tried a bunch of different variation of the normal touch-callout: none and user-select: none everyone suggest and nothing seem to help.

I have also tried to remove all javascript and all CSS except a simple variation of the above mentioned, and the magnifying glass still appears.

How can I get it to go away? Is there any plugin that can be causing this issue? Any help is much appreciated.

Cordova plugins:

  • com.mbppower.camerapreview
  • cordova-plugin-statusbar
  • cordova-plugin-whitelist
  • ionic-plugin-keyboard
  • org.apache.cordova.camera
  • org.apache.cordova.console
  • org.apache.cordova.device
  • org.apache.cordova.dialogs
  • org.apache.cordova.file
  • org.apache.cordova.file-transfer
  • org.apache.cordova.network-information
  • org.apache.cordova.vibration

Cordova version: 5.1.1 iPhone 5s with iOS version: 9.0.1

Automatico
  • 12,420
  • 9
  • 82
  • 110
  • 1
    possible duplicate of [global disable magnifying glass on iOS 9 in meteor cordova app](http://stackoverflow.com/questions/32720848/global-disable-magnifying-glass-on-ios-9-in-meteor-cordova-app) – jcesarmobile Sep 28 '15 at 12:19
  • @jcesarmobile I found that later too, but that was only after a lot of googling for various things. – Automatico Sep 28 '15 at 12:58
  • The fix is no longer working in iOS 15.1. See https://github.com/apache/cordova-ios/issues/1216 – Teodor Sandu Jan 18 '22 at 08:28

2 Answers2

18

Thank you for that Automatico! Saved me from a lot more frustration.

Since then however it looks like that code has been merged into mainline cordova and can just be enabled by adding

<preference name="SuppressesLongPressGesture" value="true" /> to config.xml

That worked perfectly for me!

Here is the commit and notes that brought it in

https://github.com/apache/cordova-ios/commit/1ad9951c80dbf97281e763f5f27a9bc8852c0537

Automatico
  • 12,420
  • 9
  • 82
  • 110
user3624154
  • 196
  • 1
  • 2
  • Thank you! This should be the accepted answer now. To confuse matters even more, I don't see the magnifying bubble on an iphone 6 plus, but I do see it on 6 and the simulator. – mpoisot Dec 21 '16 at 23:49
  • This is definitly working on iOS 11. This should be the accepted answer. – Naderio Jun 27 '18 at 19:23
  • This is no longer working on iOS 15.1, due to a regression bug in WebKit. See https://github.com/apache/cordova-ios/issues/1216 – Teodor Sandu Jan 18 '22 at 08:27
6

Apparently, in iOS 9 there is a bug which makes the -webkit-user-select: none; not work. There is a plugin which fixes this

https://github.com/EddyVerbruggen/cordova-plugin-ios-longpress-fix

Thanks to Frederik Wessberg https://stackoverflow.com/a/32737049/741850

Community
  • 1
  • 1
Automatico
  • 12,420
  • 9
  • 82
  • 110