How to turn off double tap zoom feature in Safari on iOS devices

Question

How to turn off double tap zoom feature in Safari on iOS devices

As I work on developing my web browser game, I encountered an issue with Safari iOS where double tapping triggers a magnifying glass feature:

https://i.sstatic.net/B2y2L.png

I have been trying to disable this feature but so far, no luck. I attempted using user-select: none (specifically -webkit-user-select: none for Safari), touch-action: none, and various ways of using event.preventDefault().

While there are resources available on how to hide it for long press events (where -webkit-user-select: none does work) and how to prevent double tap zoom, I have not yet found a method to hide this magnifying glass during a double tap gesture.

Is there a solution for this problem?

javascript html css accessibility mobile-safari

Answer 1

Answer №1

If you're using a game with an embedded WkWebView, there's a setting in the web view configuration that can be used to turn off interactive text features. This disables things like text selection, double-tapping, and pinch-to-zoom. However, keep in mind that this setting will affect all text interactions, so use it carefully.

let config = WKWebViewConfiguration()
let view = WKWebView(frame: .zero, configuration: config)
view.configuration.preferences.isTextInteractionEnabled = false

If your website is accessed through Mobile Safari, you have the option to intercept specific element events using the touchend and touchcancel events. But, be aware that this approach may cause other unintended consequences, such as preventing events from bubbling up or interrupting event chains (e.g., the click event of the same element).

const eventParams = { passive: false };
document.body.addEventListener('touchcancel', ignore, eventParams);
document.body.addEventListener('touchend', ignore, eventParams);

function ignore(e) {
  e.preventDefault();
}

As far as I know, there isn't a way to disable these features using only CSS.

Answer 2

If you're using a game with an embedded WkWebView, there's a setting in the web view configuration that can be used to turn off interactive text features. This disables things like text selection, double-tapping, and pinch-to-zoom. However, keep in mind that this setting will affect all text interactions, so use it carefully.

let config = WKWebViewConfiguration()
let view = WKWebView(frame: .zero, configuration: config)
view.configuration.preferences.isTextInteractionEnabled = false

If your website is accessed through Mobile Safari, you have the option to intercept specific element events using the touchend and touchcancel events. But, be aware that this approach may cause other unintended consequences, such as preventing events from bubbling up or interrupting event chains (e.g., the click event of the same element).

const eventParams = { passive: false };
document.body.addEventListener('touchcancel', ignore, eventParams);
document.body.addEventListener('touchend', ignore, eventParams);

function ignore(e) {
  e.preventDefault();
}

As far as I know, there isn't a way to disable these features using only CSS.

Answer 3

Answer №2

Here's how I tackled the issue specifically for Safari:

initialize();
canvas.addEventListener("touchend", e => playGame(e));
canvas.addEventListener("touchstart", e => playGame(e));
canvas.addEventListener("touchmove", e => playGame(e));

document.body.addEventListener('touchstart', (e) => e.preventDefault(), { passive: false });

In most cases, you can simply include this line of code :

document.body.addEventListener('touchstart', (e) => e.preventDefault(), { passive: false });

Additionally, if adding e.preventDefault() within the playGame(e) function doesn't work for me.

Answer 4

Here's how I tackled the issue specifically for Safari:

initialize();
canvas.addEventListener("touchend", e => playGame(e));
canvas.addEventListener("touchstart", e => playGame(e));
canvas.addEventListener("touchmove", e => playGame(e));

document.body.addEventListener('touchstart', (e) => e.preventDefault(), { passive: false });

In most cases, you can simply include this line of code :

document.body.addEventListener('touchstart', (e) => e.preventDefault(), { passive: false });

Additionally, if adding e.preventDefault() within the playGame(e) function doesn't work for me.

How to turn off double tap zoom feature in Safari on iOS devices

Answer №1

Answer №2

Similar questions

Is it possible to clear a div using jQuery and then restore its contents?

The mysterious workings of the parseInt() function

I am looking to develop a customizable table where the user can input their desired information

Retrieve information from the database upon clicking the submit button

Can you explain the significance of Pageset to me?

Struggling to align materialUI input or textfield horizontally

The JSX Configuration in TypeScript: Comparing ReactJSX and React

If the variable is empty, use jQuery ajax to send a request with different data

sending data from angular controller to a node server

I'm struggling to find the perfect configuration for Vite, JSconfig, and Aliases in Visual Studio Code to optimize Intellisense and Autocomplete features

Passing JSON data from an Angular.js frontend to a Node.js backend is

Are HTML/CSS/JavaScript adjustments made after DOM loading taken into consideration in Google search results?

IE7, IE6 display margins differently compared to other browsers

Implementing dynamic data filtering in Vue.js is a valuable feature that

Effective ways to engage with a window that is supervised by a different controller?

Issue with Bootstrap 4 Navbar collapsing and not expanding again

What is the best way to position HTML grandchildren using CSS Grid Lines?

Designing the button outline variant with Material-UI styling

Removing data with sweetalert in a Ruby on Rails application

Adjust the text positioning to be lower without affecting the placement of the image