javascript - How to disable magnifying glass in iPadOS15 safari - Stack Overflow

admin管理员组

文章数量:1353630

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?

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?

• javascript
• html
• css
• webkit
• ios15

Share Improve this question Follow asked Oct 8, 2021 at 6:22 Takabasi SyuTakabasi Syu 9111 silver badge33 bronze badges 3

• 1 Is there any way to suppress the magnifier without disabling the click event? – Takabasi Syu Commented Oct 11, 2021 at 4:00
• Or if you know the conditions of appearance, please let me know. – Takabasi Syu Commented Oct 11, 2021 at 5:31
• Did you figure out how to solve this? – CosmicSeizure Commented Feb 8, 2023 at 23:45

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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

The feature was brought back in iOS 15, see https://9to5mac./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/show_bug.cgi?id=231161

本文标签： javascriptHow to disable magnifying glass in iPadOS15 safariStack Overflow