How to disable magnifying glass in iPadOS15 safari

user_17104209 0
Viewed 1670

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?

ios15 webkit css html javascript
2 Answers

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

user_44758870

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

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 and set the css.

#some-html-id { -webkit-user-select: none; }

/* 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/0efro6cw/

user_114178220
Related