Ctrl + Zoom on overlay trigger page zoom (linux desktop)

[brunob]

A bit like #11 but on desktop, when i use ctrl+zoom on the overlay this trigger page zoom.

This can be reproduced on https://raruto.github.io/leaflet-gesture-handling/examples/leaflet-gesture-handling.html

I can't reproduce on the orginal script demo https://elmarquis.github.io/Leaflet.GestureHandling/examples/ which hide the overlay instantly when you ctrl+zoom it.

I've tried to tweak the transitions https://github.com/Raruto/leaflet-gesture-handling/blob/master/src/index.css#L18 & https://github.com/Raruto/leaflet-gesture-handling/blob/master/src/index.css#L24 to 0 and it doesn't fix the bug.

[Raruto]

Hi @brunob

https://raruto.github.io/leaflet-gesture-handling/examples/leaflet-gesture-handling.html

I can't reproduce it:

• Windows 11 (64-bit) + Firefox 136.0
• Windows 11 (64-bit) + Chrome 133.0
• Windows 11 (64-bit) + Edge 133.0

https://elmarquis.github.io/Leaflet.GestureHandling/examples/

It's been a while since I visited that page, but right now the overlay appears to me after several "scroll" attempts (I have to click on the map first to make it appear immediately).

[brunob]

Here is a video showing the bug with firefox 135.0.1 on ubuntu 24.04.

bug.webm

[Raruto]

I've tried to tweak the transitions to 0 and it doesn't fix the bug.

It might be that setTimeout behaves differently in linux's event loop (or maybe not, who can say for sure..)

leaflet-gesture-handling/src/index.js

Lines 133 to 142 in d2e0a39

	_disableWarning: function(gesture, delay) {
	clearTimeout(this._isFading);
	this._isFading = setTimeout(
	L.bind(function(gesture) {
	L.DomUtil.removeClass(this._map._container, "leaflet-gesture-handling-" + gesture);
	}, this, gesture),
	delay || this._map.options.gestureHandlingOptions.duration
	);
	L.DomUtil.removeClass(this._map._container, "leaflet-gesture-handling-warning");
	},

BTW, this is what i tried: map.gestureHandlingOptions.duration < transition-duration (at least 100ms of difference between them)

Here it is a tampermonkey script you can play with:

// ==UserScript==
// @name         Set Gesture Handling Duration
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  Set gesture handling duration on page load (Linux OS)
// @author       Raruto
// @match        https://raruto.github.io/leaflet-gesture-handling/*
// @supportURL   https://github.com/Raruto/leaflet-gesture-handling/issues/30#issuecomment-2704855581
// @run-at       document-start
// @unwrap
// ==/UserScript==

(async function() {
  // 🤓 wait for leaflet.js
  if (!window.L) {
    await new Promise(r => Array.from(document.scripts).find(s => s.src.includes('leaflet.js')).addEventListener('load', r));
  }

  // 🥬 detect Linux OS
  if (navigator.userAgent.toLowerCase().includes("linux")) {
    window.L.Map.addInitHook(function(e) {
      this.options.gestureHandlingOptions.duration = 700;
    });
    document.head.insertAdjacentHTML('beforeend', `<style>.leaflet-gesture-handling-warning:after { transition-duration:.8s }</style>`);
  }
})();

👋 Raruto

[brunob]

Thx for the feedback.

BTW, this is what i tried: map.gestureHandlingOptions.duration < transition-duration (at least 100ms of difference between them)

I've also tried with transition-duration: 1s; for .leaflet-gesture-handling:after & .leaflet-gesture-handling-warning:after and a duration of 800 in the options and the bug is still there :\

[Raruto]

Right now, I don't have a Linux OS to test it.

I can't reproduce on the orginal script demo https://elmarquis.github.io/Leaflet.GestureHandling/examples/ which hide the overlay instantly when you ctrl+zoom it.

Like this:

// ==UserScript==
// @name         Set Gesture Handling Duration
// @namespace    http://tampermonkey.net/
// @version      2.0
// @description  Set gesture handling duration on page load (Linux OS)
// @author       Raruto
// @match        https://raruto.github.io/leaflet-gesture-handling/*
// @supportURL   https://github.com/Raruto/leaflet-gesture-handling/issues/30#issuecomment-2711307252
// @run-at       document-start
// @unwrap
// ==/UserScript==

(async function() {
  // 🤓 wait for leaflet.js
  if (!window.L) {
    await new Promise(r => Array.from(document.scripts).find(s => s.src.includes('leaflet.js')).addEventListener('load', r));
  }

  // 🥬 detect Linux OS
  if (navigator.userAgent.toLowerCase().includes("linux")) {
    document.head.insertAdjacentHTML('beforeend', `
<style>
  :root .leaflet-gesture-handling:after         { display: none; }
  :root .leaflet-gesture-handling-warning:after { display: flex; }
</style>`);
  }
})();

Some further ideas:

• it could behave differently with different meta viewport setups? (eg. user-scalable and so on..)

• the event (e) variabile is wrongly intercepted/consumed by "leaflet" handler (ie. L.DomEvent.on):

leaflet-gesture-handling/src/index.js

Line 40 in d2e0a39

L.DomEvent.on(this._map._container, "wheel", this._handleScroll, this);

leaflet-gesture-handling/src/index.js

Lines 258 to 268 in d2e0a39

	_handleScroll: function(e) {
	if (this._map.scrollWheelZoom && this._map.scrollWheelZoom.enabled()) {
	if (e.metaKey || e.ctrlKey || (e.shiftKey && this._map._rotate)) {
	e.preventDefault();
	this._disableScrollWarning();
	} else {
	this._enableScrollWarning();
	this._disableScrollWarning(this._map.options.gestureHandlingOptions.duration);
	}
	}
	},