Cort3z Cort3z - 4 months ago 116
CSS Question

IOs Cordova long-press shows text-select magnifying glass even with text-selection disabled, how to remove?

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

Answer

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 http://stackoverflow.com/a/32737049/741850