Interactivity API: Event directives cannot be passive

[westonruter]

Description

I have a page that has a dozen Image blocks with lightbox enabled. When I open the console, I see many many warnings:

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

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

At issue here is the Image block's use of these touch event directives:

gutenberg/packages/block-library/src/image/index.php

Lines 297 to 299 in 69a82ac

	data-wp-on--touchstart="actions.handleTouchStart"
	data-wp-on--touchmove="actions.handleTouchMove"
	data-wp-on--touchend="actions.handleTouchEnd"

Such scroll event listeners should be passive for performance to ensure smooth interactivity. In fact, Chrome defaults these events to be passive by default (and Firefox too apparently). Safari, however, does not.

Nevertheless, there is no way currently to specify using event directives to specify that event handler should be passive. Such events should always be passive unless they call event.preventDefault(). The Image block only may call preventDefault in the touchmove handler:

gutenberg/packages/block-library/src/image/view.js

Lines 205 to 226 in 69a82ac

	handleTouchStart() {
	isTouching = true;
	},
	handleTouchMove( event ) {
	const ctx = getContext();
	// On mobile devices, we want to prevent triggering the
	// scroll event because otherwise the page jumps around as
	// we reset the scroll position. This also means that closing
	// the lightbox requires that a user perform a simple tap. This
	// may be changed in the future if we find a better alternative
	// to override or reset the scroll position during swipe actions.
	if ( ctx.lightboxEnabled ) {
	event.preventDefault();
	}
	},
	handleTouchEnd() {
	// We need to wait a few milliseconds before resetting
	// to ensure that pinch to zoom works consistently
	// on mobile devices when the lightbox is open.
	lastTouchTime = Date.now();
	isTouching = false;
	},

Preact does not support setting the passive flag when adding event listeners via props: preactjs/preact#428

The workaround I suppose would be to not use event directives at all for the Image block, and to instead call addEventListener at the init action.

👉 In any case, it would be great if perhaps the event directives could somehow default to being passive to better ensure best practices for performance.

Read more from MDN on using passive listeners.

Step-by-step reproduction instructions

1. Add Image blocks to a post
2. Enable the lightbox functionality
3. View the post on the frontend with the console open

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[sirreal]

Was this resolved by #61885?

[sirreal]

This is related to #61634.

[westonruter]

I'd say it is partially resolved. In #61885 passive event listeners were used for data-wp-on-async-window and data-wp-on-async-document. But for other data-wp-on-async-* directives, we cannot currently use passive event listeners due to preactjs/preact#428. However, once Preact supports them, we could immediately make data-wp-on-async-* all passive right away.

[yassine-m-a]

Hello, has this problem been resolved? I’m experiencing the same issue on my website. Steps to reproduce: create a page, add a random image, enable “Expand on click.” When I pinch-to-zoom in Safari, the image moves erratically and I can’t focus on the area I want.