How to disable magnifying glass in iPadOS15 safari

Question

I want to disable text magnifying glass that appears when we long press on any html element.

It has started to appear again in IOS15.

I tried the following methods, but they did not work on iOS15. Disable magnifying glass in iOS html app

Do you know of any CSS properties or other ways to disable it?

Answer 1

Disabling text selection with -webkit-user-select: none; did not work for me. I must use @Zhen Yao approach with calling event.preventDefault() in the touchstart event.

Additionally: You can disable the magnifying glass on the entire document or on a specific element , depending on which element you call the touchstart event.

/* disable on entire document */
//var htmlElement = document;

/* disable on specific html element */
var htmlElement = document.getElementById( 'some-html-id' );

htmlElement.addEventListener('touchstart', function( event ) { 
      event.preventDefault();
}, false);

Sample fiddle: https://jsfiddle.net/p3y71zL4/3/

Answer 2

The feature was brought back in iOS 15, see https://9to5mac.com/2021/06/07/ios-15-brings-back-the-magnifying-glass-for-accurate-text-selection/

One solution is to handle the "touchstart" event and call event.preventDefault() in your handler.

Note that the above solution does not work if you still want to handle events such as "click" .

Also, Apple fixes the issue in WebKit by allowing using -webkit-user-select: none; to disable magnifying glass, see https://bugs.webkit.org/show_bug.cgi?id=231161