b310-digital/teammapper

Fix warning: Added non-passive event listener to a scroll-blocking 'touchstart' event

Closed this issue · 4 comments

Describe the bug
Every time when a node is added, I see this warning in the console

draw.ts:89 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

Task: Investigate why its there and preferably fix it as well.

Do we have any issues with scroll performance? This warning is only visible when setting logging levels to include verbose, and setting 'passive' on the event handler (that's been there forever) would only help scroll performance and nothing else.

Do we have any issues with scroll performance? This warning is only visible when setting logging levels to include verbose, and setting 'passive' on the event handler (that's been there forever) would only help scroll performance and nothing else.

the warning in the console can't be there forever, its the first time I actually saw it yesterday. also it appears with every node that is added and not with scrolling.

Yeah it appears because we're adding a touchstart event handler to every node, which can impact scrolling performance because it essentially "captures" the scroll sometimes. It has no impact on our performance though because we're not actually scrolling through anything. I'll take a look and see if adding passive to the EH has any drawbacks.

@JannikStreek This can't be changed, since we're intentionally preventing the default action (scrolling) in the touchstart event handler on mobile. Adding passive leads to the following error:

draw.ts:94 Unable to preventDefault inside passive event listener invocation.