Emscripten and iOS Safari

So, I have lots of trouble in general with iOS Safari when using the Emscripten build of SDL.

I just want to create a thread here to see what kinda of fixes each person has done in their own repositories regarding making things actually work in iOS Safari.

I can see things like the canvas randomly zooming in, devices where no touch events are generated and other weird things. So, mostly just curious what are workaround solutions for these iOS Safari weirdness. Android has Chromium which share maintainers with the actual Emscripten project so things there mostly works with less hiccups.

I found out my issue was that Touch.identifier works differently on iOS Safari.

Also, I had a hard time connecting Safari from macOS to the one on iOS, the only thing that worked for me was using the Safari Technology Preview in macOS and the iOS Simulator from Xcode, if someone knows about the magic here, please comment as no guide I found on internet was updated or worked.

Anyway, once I got that working, I added logs for SDL_FINGERDOWN , SDL_FINGERUP and the SDL_FINGERMOTION (I am going from memory here, but hopefully got the events correctly), and then could see that fingerId in Safari works differently - I had before experimented with a JS only and noticed Touch.identifier was giving different values.

In all Android devices I tested, both in SDL2 Android App and using Emscripten build on Android, the fingerId worked like this: first finger you touch the screen gets assigned 0 ID, then if you don’t release it and a second finger touches the screen it gets ID 1, and if you release the first finger, it releases ID 0 and once you touch a third finger it gets assigned ID 0 (since it’s not used anymore).

This behavior on Android was similar to how the multiple mice approach to touch works in Game Maker Studio, but now I discovered that on iOS Safari things are different. I believe in Chrome things are probably consistent since Touch.identifier is an int there, I have no idea what it is other systems.

Anyway, my plan is to read the unique ID and the SDL_FINGERDOWN, SDL_FINGERUP, uses these events to reserve or release an id to mimic how it works on Android. Now this isn’t done in SDL layer, and I am curious on why. Is there a situation where a SDL_FINGERUP never happens? (With it actually released) In my approach this would reserve the proxy fingerId forever.

Btw, I have been told there are no touch events on Safari on macOS

Apparently there what has to be used are pointer events (Pointer events - Web APIs | MDN).

From what I remember from Emscripten it indeed uses touch events. I am curious, does Apple produces any macOS computer with touch screen?

I managed to create a helper that takes the Touch.identifier and then standardizes them in a way that in the end all fingerIDs work the same, using the Android default behavior as the result.

Now I am trying to figure it out Fullscreen through SDL2 in Safari’s iPhone.

First, I know iPhone Safari doesn’t have a fullscreen API, so I am curious to hear possible way to workaround this.

Apple does not develop a touch screen monitor. You can debug your app in an iOS emulator on MacOS if needed. Just curious if you added the sdl hints:


you can prompt to make a “web app” that puts a shortcut to a website on an ios devices homescreen

i tried just sharing and saving a little emscripten sdl/pure data demo a web app but it still shows the navigation

so there’s a way to do it as a user using the built in scripting app ‘shortcuts’ https://ios.gadgethacks.com/how-to/turn-any-website-into-full-screen-app-your-iphone-0384426/

there’s also the proper way to do it as a developer

couldn’t link to the first article about prompting to save a web app https://love2dev.com/blog/creating-a-mobile-web-application-on-the-iphone-and-ipad/