Touching "Ready to Start !" on iOS 17.1.1 (iPhone 14 Pro) Doesn't Do Anything

[bradwyatt]

Hello,

When I use my laptop to run my pygbag game, I am able to click on "Ready to Start !" and play the game (Mac M1 with Google Chrome). However, when I use my iPhone 14 Pro with Safari or Google Chrome browsers and try to touch the message, nothing happens.

The game (as an example) is https://bradwyatt.github.io/clickball/, but this extends to any other pygbag games hosted in browsers that I've tried.

My only workarounds so far to get this to work on iPhone/iPad: Workaround #1) This will auto-start without "Ready to Start!": pygbag --ume_block 0 main.py. However, this is not optimal because you'll get a pop-up message "play() failed because the user didn't interact with the document first" Workaround #2) When I touch on anywhere on the page outside of the game, the game does seem to start. Workaround #3) I have a trackpad on my iPad, and when I use my trackpad (with accessibility) to do a click, that works.

Thanks

[pmp-p]

Hi, first please retry with the --git option on pygbag build.

i don't have access to a physical device to fix that - javascript - bug, and only safari 15 was tested ok for now (with git version) . The only workaround that works right now is --ume_block 0 and wait for a click in pygame loop before starting background music.

[bradwyatt]

Hi, first please retry with the --git option on pygbag build.

i don't have access to a physical device to fix that - javascript - bug, and only safari 15 was tested ok for now (with git version) . The only workaround that works right now is --ume_block 0 and wait for a click in pygame loop before starting background music.

Thanks for quick response. When I did the --git option, I got a grey screen on both mobile and desktop and couldn't play the game at all.

Should I be using the --git option with --ume_block 0 as a best practice?

I can try implementing your workaround (once I get the time).

[pmp-p]

startup is indeed still random but you did not commit with --git cdn so i cannot test the new ios detection yet

Safari 16

[bradwyatt]

In my browser, when I use a mobile simulator and select iPhone, it works without a problem. I'm guessing because the simulator treats clicks like taps. So I'm not sure if that's an accurate way of figuring this problem out.

Regarding --git cdn, when I did pygbag --git cdn main.py, I'm getting a pygbag: error: unrecognized arguments: cdn.

[pmp-p]

just --git it is a shortcut for --cdn https://pygame-web.github.io/pygbag/0.0/

[bradwyatt]

I just committed pygbag --git clickball 10 minutes ago. The game loads for both browser and mobile. But again, on mobile in order for the game to start, I have to tap outside of the game on the page.

[bradwyatt]

I updated my clickball game to include a start menu that requires a click before playing. I also included code to generate a .wav sound when the ball is clicked.

After my code changes, I then did pygbag --ume_block 0 clickball and pushed the new build files to my github pages https://bradwyatt.github.io/clickball/.

The desktop browser works perfectly, including the sound when the ball is clicked.

However, for mobile, even though I can click to start the game and can still play the game, the sound doesn't play at all when I click on the ball. How can I get the sound to work?

[pmp-p]

Sound is working for me on safari 15 with your new build. btw do not use wav but ogg instead whereever possible.

[bradwyatt]

Ok, I replaced wav with ogg with the new build.

Yes, Safari on my desktop has the sound working for this. However, when I try iPhone 14 Pro (17.1) whether it's through Chrome or Safari, the sound still does not play.

Interestingly enough, on my desktop computer, I used Mobile FIRST extension on for Google Chrome and emulating iPhone 13, and that did generate sound.

Also, it's up to you, but if you want, this sound issue I'm experiencing can be created as a separate issue within this Github repo, since I no longer need an answer to my original question regarding "Ready to Start !".

[pmp-p]

i could repro on iphone 14 pro with safari/chrome 16 but i cannot access devtools :(

[bradwyatt]

Is there anything I can do to help you troubleshoot this to solve this issue? I had someone try to play the game with a Pixel 7 and it also didn't have sound (just like my iPhone 14 Pro).

Do you have any pygbag examples hosted online that I can attempt to try to load via my iPhone 14 Pro, and I can let you know if the sounds works? If the sound works on the pygbag examples online, then perhaps the culprit is the way my project was built. But if not, maybe it's a bug in pygbag.

[pmp-p]

it would be nice of you to try some of the itch games https://itch.io/c/2563651/pygame-wasm and find some that don't work on ios so i can cross check failing init methods

[bradwyatt]

Keep in mind, iOS also just updated to 17.1.2 last night.

I wasn't able to find any of the games to either start successfully, or if it did start successfully, to have sound.

Here are a few examples: Lost&Found and Endless Fusion- On mobile, it only starts when I click outside of the game on the page. No sound on mobile (on desktop it does have sound though) --> If I click the back page and then click "Restore Game" button, it does focus on the game correctly though. But still no sound of course.

SpeedCube and Neighborhood Postal Service- I can't even click "Ready to Start!" on mobile (on desktop I can click it, and the game has sound)

Interestingly enough, for many of the games, on the page before clicking "Run Game", it says "This game is not designed to run on your device. Add it to a collection to play later, or you can try to run it anyway." I think all of the games that mention this are in the same category as SpeedCube, where they won't even start.

[pmp-p]

ok then it is the safari detection that is failing, could you give me the content of

window.navigator.userAgent

edit/ seems there is always the word "iPhone" in it, pushing a fix to try https://github.com/pygame-web/pygbag/commit/aff10288402db5d18678bb25aca2c3c8f21bc4a4 with --git

[bradwyatt]

ok then it is the safari detection that is failing, could you give me the content of

window.navigator.userAgent

edit/ seems there is always the word "iPhone" in it, pushing a fix to try aff1028 with --git

When I go to the barcode that you sent via my iPhone, this is what I get (and I can't move to the right on the screen, the white part cuts it off)

Also, Google Chrome and Safari both have the same results on mobile when I try running a pygbag game online and I get no sound.

[pmp-p]

this is weird when using rotation+reload it autofits for me i got Mozilla/5.0 (iPhone; CPU iPhone OS 17_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.1 Mobile/15E148 Safari/604.1 after safari 17 update so i guess the fix will work, please retry with git on your github.io sample

ipad won't give the same so they will need further testing Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.1 Safari/605.1.15

[bradwyatt]

this is weird when using rotation+reload it autofits for me i got Mozilla/5.0 (iPhone; CPU iPhone OS 17_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.1 Mobile/15E148 Safari/604.1 after safari 17 update so i guess the fix will work, please retry with git on your github.io sample

ipad won't give the same so they will need further testing Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.1 Safari/605.1.15

Ok, I used landscape on web version barcode on Safari on iPhone and got the following:

Let me know if you want to test via my iPad as well (it has the same results with pygbag as my iPhone).