prohibit magnifying glass from appearing on iOS 9 in a meteor cordova application

https://i.sstatic.net/jQOpS.jpg

I have been experimenting with various solutions to get rid of the intrusive magnifying glass using CSS. Interestingly, on my iOS9 meteor cordova build, it still briefly appears and then disappears after a few milliseconds.

This approach worked fine on iOS 8, but seems to be ineffective on iOS 9 with the following 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;
}

Could it be that I overlooked something specific to iOS 9?

Answer №1

Indeed, this issue is specifically related to iOS9. As a user of Cordova, utilizing the following plugin can rectify the issue for you: https://github.com/EddyVerbruggen/cordova-plugin-ios-longpress-fix

The problem stems from UILongPressGestureRecognizer triggering before handling the -webkit-user-select: none in your css.

I trust this information proves beneficial to you.

Answer №2

As mentioned by Frederik, the plugin is now integrated into cordova. You can check it out at https://github.com/apache/cordova-ios/pull/174

To activate the solution, add the following line to your config.xml:

<preference name="SuppressesLongPressGesture" value="true" />

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Trouble with the Width of Selection Box Options

Encountering a peculiar issue with multiple select boxes in my project. Some of the options within the select box are exceeding the width of the box. Proper Dropdown View: https://i.sstatic.net/xDy6I.jpg Incorrect Dropdown Display: https://i.sstatic.ne ...

What is the best way to begin the main page content below the stationary header in order to prevent any overlap with the hyperlink section?

I have created this HTML page, but I am facing an issue where the hyperlinked sections overlap with the static header when clicked on. I want all linked sections to appear below the header and each section to have different dimensions within the iframe. I ...

Space around the flex container

I am facing an issue with a flex display that splits the screen into two sections: one for login information and the other for a background picture. When setting up the flex layout, I notice unwanted margins on both sides (highlighted as orange bars in the ...

Using Phonegap alongside ons-scroller and ons-button

Recently, I have been using Phonegap with the Onsen UI system on iOS devices. I encountered an issue where buttons included within an ons-scroller were not clickable when running on an iPad or iPhone. Here is the code snippet that caused the problem: < ...

Animate CSS with Javascript in reverse direction

Forgive me if this is a silly question, but I'm having trouble. I need a slide-in navigation menu for smaller screens that is triggered by JavaScript. Here is what I currently have: HTML <nav class="responsive"> <ul class="nav-list unstyl ...

The background image on my link bar is inexplicably not appearing

I've been trying to solve this issue for hours and I'm at a loss. Initially, the background image was displaying correctly, but now it's not working. HTML: <head> <link type="text/css" rel="stylesheet" href="css/normalize.css" ...

My draggable item seems stuck in place. Any ideas on how to get it moving again?

I have been trying to implement some code I found on this link. Despite adding all the necessary file links, the code is not functioning as expected. It should be able to move within the bounds of a container, but it's not working properly. var max ...

Ways to modify a link tag based on a specific browser width

Looking for a solution to optimize the drop-down sign in box code that gets appended to a hamburger menu when the mobile width media query is called. Can we refactor this to switch the drop-down sign in box to just an anchor tag (<a href="signin">< ...

The CSS header remains the same size regardless of the size of the dynamic table

Is there a way to set the header in an XHTML page to be as wide as the page itself? I used width:100%, but the issue is that I have a dynamic table and when it grows bigger, the header doesn't expand. How can I solve this problem? #header{ top: 0 ...

What are the steps to create a customized app bar with React and Material-UI similar to this design?

Can anyone help me create an app bar that resembles this design: Click here to view I have managed to implement the search box in the top half of the app bar, but I am struggling with adding the bottom half. Here is the code I have written so far: ...

Require assistance in designing a webpage using DIV elements

I have a vision for how I want my webpage to look: Check out my mockup here: http://img64.imageshack.us/img64/5974/pagedh.jpg But, I'm not quite there yet. Here's my progress so far: I'm still learning about using <div> elements ins ...

Customizing Bootstrap Navbar: Ensuring the External Search Bar is displayed correctly within the expanded navbar

In my Bootstrap 5 navbar, I have a search bar, notifications dropdown, and collapsible buttons. How can I ensure that the search bar is visible in the expanded version of the navbar and hidden when the navbar is collapsed, while keeping the notifications d ...

When the dropdown form options in HTML are clicked, they appear disproportionately large compared to the initial select box

Sorry if my wording is a bit off, I'm still relatively new to working with CSS and HTML. I've encountered an issue where the dropdown options appear much larger than the select box itself when clicked. I can't seem to figure out how to fix i ...

Tips for transforming a scroll element into the viewport using Angular 2+

This is a sample Here is a component with a list of items: class HomeComponent { text = 'foo'; testObject = {fieldFirst:'foo'}; itemList = [ '1', '2', '3', & ...

Steps for layering three images with distinct red, green, and blue components using HTML and CSS

Is it possible to overlay three versions of an image, each with red, green, and blue components, in order to recreate the original image using only HTML and CSS? I have tried this HTML setup: <div id="container"> <img class="color" id="red" ...

What could be causing my CSS parallax effect to not work as expected?

I have been attempting to implement the parallax image technique following the Keith Clark tutorial, but I am facing difficulties in getting it to work correctly. Utilizing the skeleton CSS framework, my goal is to recreate an existing website in order to ...

Ensuring the Line Breaks in CSS and JavaScript to Easily Modify the Style

Is there a way to determine when a line will break so I can apply different styles? The design team needs 3 buttons in a grid (3 columns) with specific sizes. They want buttons with content that breaks onto the next line to have a border-radius of 13px, w ...

The hover effect is not activated by the mouse movement event

I previously encountered an issue related to flickering with an absolute div when moving my mouse, which I managed to resolve by increasing the distance between my mouse pointer and the div. Now, I am working on the next phase of my project: My goal is t ...

Chrome users may experience a jumping effect when using the jQuery .animate()

When I use a jQuery .animate() function to move an absolute positioned container, Firefox, Internet Explorer, and Opera correctly move the container to the top. However, in Chrome, the container jumps to the top and then moves down 200px from the margin. ...

Are the results displayed in a vertical array format?

Being new to this world, I would greatly appreciate any assistance! I am working with Bootstrap checkboxes and trying to print them using jQuery's window.print function. However, the issue I am facing is that the array I create from the checkboxes d ...