Emscripten build runtime error: Unable to preventDefault inside passive event listener

[CallumFerguson]

Version/Branch of Dear ImGui:

Version 1.90.6, Branch: master

Back-ends:

imgui_impl_glfw.cpp + imgui_impl_webgpu.cpp

Compiler, OS:

Windows 11 + Emscripten 3.1.59

Full config/build information:

No response

Details:

When running imgui in a web browser, when you scroll, you get the following warning in the console:

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/feature/6662647093133312

This happens when scrolling with the mouse over the canvas, and with the mouse over any other part of the web page.

I've tested this on the included glfw wgpu, glfw opengl3, and sdl2 opengl3 examples, and it happens on all of them when running in Chrome or Firefox after building with Emscripten.

I found that the particular preventDefault() call that causes this is from here:
https://github.com/emscripten-core/emscripten/blob/2e3d7f108f0c278f1aab56bebac4497f7a28ec46/src/library_html5.js#L626

So if imgui_impl_glfw.cpp ImGui_ImplEmscripten_WheelCallback is changed to return EM_FALSE instead of EM_TRUE, the preventDefault() will not run and the error will not show up in the JavaScript console. I could not find the equivalent function for SDL2.

Although that would fix the error, I'm sure there is a good reason why you would want to call preventDefault() there. Also, this might be an Emscripten problem, not an imgui problem.

There may also be a way to fix this by making certain events passive, but I could not get it to work:
https://stackoverflow.com/a/59520960

Screenshots/Video:

No response

Minimal, Complete and Verifiable Example code:

The included:

• examples/example_glfw_wgpu
• examples/example_glfw_opengl3
• examples/example_sdl2_opengl3

and possibly an other example that can be built with Emscripten

[ocornut]

Maybe @ypujante would know?

[ypujante]

@CallumFerguson I am currently working on a PR to use a different implementation of glfw with emscripten. One of the changes is to get rid of the mouse wheel callback in ImGui since the new implementation takes care of it.

I definitely can reproduce the problem with the build BEFORE my PR (https://pongasoft.github.io/imgui/pr-7520/imgui-master-b720c0f/). But I can see that the build AFTER my PR does not have this issue (https://pongasoft.github.io/imgui/pr-7520/ypujante-master-fd249f9/). So it looks like my new glfw implementation does the "right" thing in regards to mousewheel.

Could you confirm on your end that the problem goes away with the PR (by trying this demo)? (note that on macOS Firefox does not support webgpu yet so it requires Chrome, looks like you are on Windows and I believe it works fine there).

@ocornut I apologize for the delay in submitting the final PR: emscripten has been slow in releasing the needed version and then I am currently away on vacation and prefer to wait until I return (in a couple weeks) instead of trying to do a push from my laptop thousands of miles away...

[ocornut]

As discussed in said PR, it is likely we'd want to keep support for both, so it would be good to fix that particular warning either way.

Enjoy your holidays!

[ypujante]

@ocornut Got it. I will make sure that the old path does not have the warning anymore when I submit the PR. I still would like to confirm that @CallumFerguson does not see the warning with the new code.

[CallumFerguson]

I tried your demos. I can see the warning on the build before the PR, and I do not see the warning on the build after the PR.

[ypujante]

As promised, I did fix this bug part of the PR. See #7647.

Turns out that using the document as the target of the event was the cause of the issue. Using the canvas selector instead addresses the issue.