floooh / sokol

minimal cross-platform standalone C headers
https://floooh.github.io/sokol-html5
zlib License
6.55k stars 469 forks source link

Dear ImGui touch input broken on mobile browsers #969

Closed voidware closed 5 months ago

voidware commented 5 months ago

Version changelog 7 Jan, 24;

I have updated to the latest Sokol. I'm using it with imgui. Everything works on desktop.

But these are all with android/mobile/firefox (and probably others)

Problem 1: Cannot tap on controls

Tapping on simple checkbox or opening widget dropdowns does not work. There appears to be a burst of events that interfere. If i am very quick, it can sometimes work.

This behaviour happens in my app and also in the imgui demo window.

If i add sapp_consume_event() in the input handler, this appears to improve it, but that may exacerbate problem #2.

Problem 2: text input completely broken

The virtual keyboard never appears. I tried the imgui demo text input and it's the same there.

Problem 3: using text input hangs the app

Whether this is anyway or as a result of sapp_consume_event() not sure. But text input seems completely defunct.

So;

All this was working in the older sokol except on iOS. Which was why i updated.

Any suggestions. thanks.

floooh commented 5 months ago

The only recent changes that can be related were in the sokol_app.h Emscripten backend (e.g. native Android and iOS should behave the same as before).

The changes are described in this changelog entry:

https://github.com/floooh/sokol/blob/master/CHANGELOG.md#02-jan-2024

...non-working text input in mobile browsers is unfortunately expected now. I removed the half-assed hack which used a hidden HTML text input field to bring up the virtual keyboard. This never worked reliably across mobile browsers and platforms. It's simply an area in the web APIs that's fundamentally broken since text input only works for HTML text input elements, not something like a WebGL canvas. There's not much point in trying to come up with hacks to make that scenario work, it's something the W3C needs to fix in the HTML standard.

The touch input problems are unexpected, but I can reproduce them on my Android phone (strange though that I didn't notice this before). The change here is that touch events now bubble up to the HTML Document object. I don't yet understand why that simple change would cause such a drastic behaviour change, but yeah this needs to be fixed.

As a temporary workaround, you should get the previous touch input behaviour by calling sapp_consume_event() for all touch events.

voidware commented 5 months ago

Ok. thanks for the clarification. This is an emscripten build. The virtual keyboard was only working before under Android. It didn't work on iOS (safari).

So should sapp_show_keyboard still work on emscripten mobile?

The idea being to manually call it. The problem would be, it not taking effect except inside the event callback, which will only be called once a key is already pressed. So chicken and egg.

Unless there's another event where it would work. keyboard focus?

floooh commented 5 months ago

So should sapp_show_keyboard still work on emscripten mobile?

No that's all removed. The show-keyboard function worked by focusing a hidden HTML text field, which on mobile browsers is the only way to make the virtual keyboard show up (and even this doesn't work reliably, for instance on Safari). This hidden text field has been removed completely.

The only way to get text input on mobile is either to implement your own virtual keyboard (most mobile games seem to do this), or put a "proper" HTML UI on top of the WebGL canvas.

...unless of course browser start to clean up this mess of different behaviours, but tbh that's unlikely.

voidware commented 5 months ago

ok thanks. Looks like it's time to make my own keyboard. Probably better in the long run.

voidware commented 5 months ago

im going to run with the sapp_consume_event in the meantime. cheers.

floooh commented 5 months ago

I'll keep this issue open because I definitely need to look into this weird "burst issue" for touch events.

voidware commented 5 months ago

Yes please. the sapp_consume_event workaround seems to be ok for now. I've arranged to only do this for mobile in my code, which is where the problem appears (desktop is fine).

FYI, i've also now written my own virtual keyboard. I should have done this ages ago. There were so many browsers with different behaviour, it was madness before.

floooh commented 5 months ago

Also see this ticket I just wrote: https://github.com/floooh/sokol/issues/972

...it's a small fix so I will try to squeeze this in "soon-ish".

floooh commented 5 months ago

Ok, previous behaviour is now restored (and new config items in sapp_desc enable event bubbling for specific input event categories.

See: https://github.com/floooh/sokol/blob/master/CHANGELOG.md#27-jan-2024

voidware commented 5 months ago

Thanks for the fix. All working here!

Zireael07 commented 4 months ago

Dear imgui demo seems still broken on Android web for me, and same for the microui demo :/

floooh commented 4 months ago

Hmm, the sokol-app dear imgui sample works ok here on my Pixel 4a in Chrome:

https://floooh.github.io/sokol-html5/imgui-sapp.html

...apart from everything being tiny... but the touch input works.

(PS: the microui sample doesn't support touch input, so it's expected that this doesn't work on mobile)