Patch event listeners for touch events to be non-passive, Fix scroll-blocking touch event listeners in OpenLayers legacy#6449
Conversation
Added a patch to modify event listener behavior for touch events, ensuring non-passive listeners are used to maintain map interaction fluidly.
|
@Antoviscomi OL2 map is only used for edition. Can you confirm that you watched lags only in edition mode? |
Yes, @nboisteault , I can confirm that. It appears that the OpenLayers 2 legacy core registers these listeners globally upon initialization. By patching these to be non-passive, I've seen two major benefits: At Startup: The browser console is now clean of violation warnings, and the main thread is no longer throttled during the initial rendering. In Edition: The interaction is finally fluid, as the browser doesn't have to wait for the scroll-blocking check on every touch event. Furthermore, without the patch, those violations would multiply exponentially during editing. Since every map pan or vertex drag triggers continuous redraws and event processing, the scroll-blocking nature of the original listeners caused a massive overhead. Now, even with heavy interaction, the thread stays free and the 'incalculable' violations I previously saw are completely gone In my current environment (running via Rspack/Apache), the load time is now a solid 670ms and the map feels much more responsive overall. |
Added a patch to modify event listener behavior for touch events, ensuring non-passive listeners are used to maintain map interaction fluidly.
This PR addresses the performance violations and laggy interactions on touch devices caused by
non-passiveevent listeners in the legacyOpenLayers 2components.Chrome and other modern browsers flag these as
[Violation]because they block the main thread while waiting for a potentialpreventDefault(). In a mapping context, this delay results in jerky zoom and pan movements.Changes
Added a global
EventTargetpatch inindex.js: This interceptor captures touchstart and touchmove events.Explicitly set
passive: false: While it sounds counter-intuitive, forcing passive: false tells the browser that we intend to usepreventDefault()for map interactions, eliminating the 100-200ms "observation" delay the browser would otherwise impose.Ensured compatibility: The patch handles both boolean and object-based
addEventListenersignatures, ensuring no breakage in legacy code or newer components.Performance Impact
Interaction Latency: Reduced. Map panning and zooming on mobile/touch screens are now significantly smoother.
Console Violations: Mitigated the "Added
non-passiveevent listener" warnings.Load Time: During testing, the overall map initialization remains fast (approx. 640ms in dev environment).
Testing
Tested on Chrome 144.0.7559.96 with mobile emulation and physical touch devices.
Verified that map panning, zooming, and drawing tools (which require preventDefault) still function correctly.
Confirmed that Ctrl+Shift+R (hard refresh) is necessary to clear the legacy JS cache and apply the fix.