56

I have some elements in my iPhone website that don't have any text in them but require the user to click and hold on them (DIVs). This causes the text-highlighting/editing loop/cursor to show up, which is really distracting.

I know there is a CSS rule for removing the black-box that shows up on clickable elements when they are touched. Is there anything like that to disable the text magnifier?

3n.
  • 1,671
  • 2
  • 17
  • 15
  • Possible duplicate of [IOs Cordova long-press shows text-select magnifying glass even with text-selection disabled, how to remove?](http://stackoverflow.com/questions/32812308/ios-cordova-long-press-shows-text-select-magnifying-glass-even-with-text-selecti) – mpoisot Dec 21 '16 at 23:51
  • The Cordova 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:30

7 Answers7

50

Just got a response from the Developer Center help desk. I needed to add this CSS rule: 

-webkit-user-select: none;
alex
  • 479,566
  • 201
  • 878
  • 984
3n.
  • 1,671
  • 2
  • 17
  • 15
8

Add this to the CSS

body {
-webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
-webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */}
Pham Van Vung
  • 223
  • 3
  • 6
6

Use these CSS rules:

-webkit-touch-callout: none;
-webkit-user-select: none; /* Disable selection/copy in UIWebView */
pdoherty926
  • 9,895
  • 4
  • 37
  • 68
vitralyoz
  • 570
  • 7
  • 14
5

This is also useful in protecting content that you don't want copied or saved, such as an image:

#yourdiv img {-webkit-touch-callout: none; }
alex
  • 479,566
  • 201
  • 878
  • 984
Jay from BKK
  • 59
  • 1
  • 2
5

This solved it for me, in JS:

document.getElementsByTagName("body")[0].addEventListener("touchstart",
 function(e) { e.returnValue = false });

Seems to bypass whatever the OS has in there to catch the touch.

andrwct
  • 351
  • 3
  • 6
4

I found this out while trying it out myself. First of all you have to add this rule to the enclosing element:

-webkit-user-select: none;

But that, by itself, is not enough on the iPhone. It turns out that the magnifying glass can still appear because, for example, a parent element would accept selection, or just because it feels like it.

However, I then discovered something cool - if your element adds a touchend and click handler to an element, then Apple's Safari finally avoids the annoying code path that causes the magnifying glass to appear, probably realizing that this element is meant for some UI interaction, and not selecting text. On an equally awesome note, if you do this on elements near the top of the screen, it will also cancel the appearance of the navigation in landscape mode! Not sure however how to cancel the appearance of navigation when clicking on elements on the bottom, does anyone have a solution for that one?

Gregory Magarshak
  • 1,883
  • 2
  • 25
  • 35
  • Awesome research. This is a common issue for quite some time. It seems some people found [solution](http://stackoverflow.com/questions/33106437/iphone-on-long-press-causing-some-rectangular-magnifier-to-pop-up). But, this is not a solution while using only javascript / css. – domino_katrino Dec 11 '15 at 04:56
  • Great research - but unfortunately this doesn't seem to work inside of a `contentEditable` - unless I've missed something. – Slbox Apr 29 '21 at 19:11
  • This probably used to work back in 2014, but I don't think it works anymore. – Naman Goel Nov 09 '21 at 05:33
3

On IOS 15.2 -webkit-user-select: none; fixed the issue, but only partially.

A long press doesn't show the magnifier anymore. However, if you double-tap and hold, it magically still appears.

There is still no 100% reliable way except event.preventDefault on touchstart. But this also blocks underlying actions so things like buttons with long-press tooltips break. Therefore, it is not always an option...

PaaD
  • 113
  • 6
  • It was driving me nuts. It’s appearing on my canvas and I think this will resolve it for me, thanks. https://stackoverflow.com/questions/72925141/how-to-get-rid-of-the-magnifier-bubble-when-dragging-or-holding-down-a-finger-in – Joe Jan 16 '23 at 01:07