[MACOS] element are difficult to click

[MatthD]

Hello!

Our tauri app work great on windows but on mac we see that our elements (html buttons) are difficult to click, as if when we click it click elsewhere (where the mouse was 0.5s ago)

Only found on Stack overflow question about that.

Can someone help on that ?

[metasmash]

Same issue here.
On windows, I can tell the user experience is pretty smooth, unfortunately not under MacOs.
Elements are hard to click on... feels like I need to pause my mouse location for few seconds before clicking.

[metasmash]

Hey everyone!

After few months, this issue has been randomly solved by passing a specific configuration to the web
wrapper.

Spoofing the browser agent and passing specific params to Tauri makes the user experience super
smooth!

The Solution

Add these configurations to your Tauri WebView setup:

.user_agent("Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/120.0.0.0 Safari/537.36")

Why This Works
Some people experienced issues with the default browser agent under macOs
https://developer.apple.com/forums/thread/721141

> console.log(navigator.userAgent)
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko)"

Spoofing the user agent is a temporary solution, because it consider your user agent as windows instead of MacOs, because it considers your app as a touchscreen app where touch events are by default enabled and make your clickable experience worst.

[FabianLars]

Sorry to be that guy but additional_browser_args is a Windows-only setting and does nothing on macOS which means this has to be a placebo effect (or it's just the user agent or something else you did).

[metasmash]

Hey that guy!

You are super right, I did different experiments and thought this was necessary, I was a bit tired today.
So after comment/uncomment the browser agent line, it seems to be the fix.

Let me dig a little bit more and I'll update my answer.
I'm pretty new to Tauri world

[metasmash]

Another fix, if it looks more elegant for you, is that under Macintosh user agent, your desktop app is acting like a screentouch application where he is expecting touch events.

This also fix the issue without changing the browser agent, might be a cleaner way to proceed. I'm still investigating if there are any tradeoff to consider, but as soon as you call tauri::webview::WebviewWindowBuilder::new

You can pass this setting executing the following js script:

tauri::webview::WebviewWindowBuilder::new(args)
        .initialization_script(r#"
            // Fix macOS clickability issues caused by problematic event listeners
            const originalAddEventListener = EventTarget.prototype.addEventListener;
            EventTarget.prototype.addEventListener = function(type, listener, options) {
                // Block touch events that interfere with mouse interactions
                if (type === 'touchstart' || type === 'touchend' || type === 'touchmove') {
                    return; // Block all touch events
                }
                
                // Block problematic click listeners that intercept and delay clicks
                if (type === 'click' && options && typeof options === 'object' && options.capture === true && options.once === true) {
                    return; // Block the problematic {capture: true, once: true} click listeners
                }
                
                return originalAddEventListener.call(this, type, listener, options);
            };
        "#);

Another approach if you have multiple windows to handle would be to create a web_utils.rs, considering:

/// Web-related utilities for Tauri windows
/// 
/// This module contains JavaScript initialization scripts and other web-related
/// utilities that are shared across different window types.

pub fn get_macos_clickability_fix_script() -> &'static str {
    r#"
        // Fix macOS clickability issues - only apply if macOS user agent detected
        if (/Mac|Macintosh/i.test(navigator.userAgent)) {
            const originalAddEventListener = EventTarget.prototype.addEventListener;
            EventTarget.prototype.addEventListener = function(type, listener, options) {
                // Block touch events that interfere with mouse interactions
                if (type === 'touchstart' || type === 'touchend' || type === 'touchmove') {
                    return; // Block all touch events
                }
                
                // Block problematic click listeners that intercept and delay clicks
                if (type === 'click' && options && typeof options === 'object' && options.capture === true && options.once === true) {
                    return; // Block the problematic {capture: true, once: true} click listeners
                }
                
                return originalAddEventListener.call(this, type, listener, options);
            };
        }
    "#
}

This approach suggest to only change the behaviour if your user agent actually contains Mac or Macintosh.
Feel free to re use this module the following way:

tauri::webview::WebviewWindowBuilder::new(args)
        .initialization_script(crate::web_utils::get_macos_clickability_fix_script());

Hope this helps to understand the issue better, I'd recommend this fix instead of actually changing the browser agent since you could introduce bias into your logging system if you have such.