global disable magnifying glass on iOS 9 in meteor cordova app

Question

I have tested several workarounds to disable the annoying magnifying glass with css, but on my iOS9 meteor cordova build it appears for a moment and fades out after some ms.

it was working on iOS 8 but not on iOS 9 now with this css code:

body, body * {
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-user-callout: none !important;
    -webkit-touch-callout: none !important;
}
input, textarea {
    -webkit-user-select: text !important;
    user-select: text !important;
    -webkit-user-callout: default !important;
    -webkit-touch-callout: default !important;
}
*{
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none; /* Firefox all */
    -ms-user-select: none; /* IE 10+ */
    user-select: none;
    -webkit-user-drag: none;
    -webkit-user-modify: none;
}

I missed something for iOS 9?

Answer 1

Yes, it is related to iOS9. Since you are a Cordova user, this plugin will fix the problem for you: https://github.com/EddyVerbruggen/cordova-plugin-ios-longpress-fix

It has to do with the UILongPressGestureRecognizer executing before handling the -webkit-user-select: none in your css.

I hope this helps you out.

Answer 2

The plugin Frederik mentioned is now build into cordova see https://github.com/apache/cordova-ios/pull/174

To enable the fix insert <preference name="SuppressesLongPressGesture" value="true" /> into config.xml