Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issues with iOS 14 and desktop Chrome (current build) #1991

Closed
beanmatt opened this issue Sep 18, 2020 · 28 comments · Fixed by #2447
Closed

Issues with iOS 14 and desktop Chrome (current build) #1991

beanmatt opened this issue Sep 18, 2020 · 28 comments · Fixed by #2447
Labels

Comments

@beanmatt
Copy link

beanmatt commented Sep 18, 2020

Describe the bug

My HTML5 game that worked perfect on iOS 13 has the following issues on iOS 14:

  • jittery/low frame rate
  • wav sounds do not play (but mp3s do)
  • collision issues (for example, small version of player can collide with coin box, but big version doesn't)

The following seem to be affected:

  • current versions of mobile Safari/Chrome/Firefox on iOS 14
  • desktop Safari 14 (sounds issue but not frame rate or collision issues)
  • desktop Chrome (current build macOS...frame rate issue but not sound or collision issues)

I just double checked on a phone using iOS 13, and it still works great. The problem happens once upgrading to iOS 14.

To Reproduce

  1. Play the game on current build of desktop Chrome on macOS, or play game on mobile Safari/Chrome/Firefox on iOS 14
  2. Compare with playing on previous version of desktop chrome, or mobile Safari/Chrome/Firefox on iOS 13

Other details

  • game was exported using current version of GDevelop
  • worked great before updating to iOS 14 and current desktop Chrome
@4ian
Copy link
Owner

4ian commented Sep 18, 2020

Can you check if this is happening with one of the starter game?
Could you list what kind of features/effects you're using in the game? I'm wondering if one is slowing down the whole game.

@4ian 4ian added the os: ios label Sep 18, 2020
@beanmatt
Copy link
Author

beanmatt commented Sep 18, 2020

I checked the example platform game on all of the browsers/OSs above, and it has the same issues. Also, after forcing the browser to redownload the game, I have noticed that on desktop Safari 14 none of the wav sounds are playing either.

It's a simple platform game: gathering coins, jumping on enemies. The only behavior I added was Blink.

@beanmatt
Copy link
Author

beanmatt commented Sep 21, 2020

I've done a little testing one the CPU usage while playing the game. All of this is on macOS:

  • Chrome desktop: 25%
  • Safari desktop: 10-15%
  • Safari mobile (iOS 13): 38%
  • Safari mobile (iOS 14): 120-140%

The only difference on mobile is the touch controls. I think this would explain the low frame rate, but not the wav sounds not playing (though, converting all wav sounds to mp3 is a simple fix).

One other thing, when loading the game in desktop Chrome I get the following error:
Screen Shot 2020-09-21 at 12 45 33 PM
This error doesn't happen in Safari.

@4ian
Copy link
Owner

4ian commented Sep 21, 2020

Thanks for investigating!
What are the iPhones/iPad you're running these tests on?
I'm a bit surprised by the fact that desktop Chrome is not running properly, because that's actually what's running GDevelop itself and Mac machines are most of the time powerful enough for such games without any issue at all. What is your mac computer model?

@beanmatt
Copy link
Author

The phones are iPhone 11 Pros. The iMac is the latest 2020 model (27 inch 5K retina screen, 3.8 GHz 8-core Intel Core i7, 32 GB ram).

I'm not an expert, but I don't think the machines are the problem. They all played the game without any issues last week. The problem only happened with the update to Safari 14 and the latest Chrome. That would lead me to believe something about the new browsers isn't playing nice with something in the game code. But I'm not savvy enough to see what exactly is causing the CPU to go so crazy.

@4ian
Copy link
Owner

4ian commented Sep 21, 2020

Fair enough, seems very unlikely that the devices are the problem. I'll take a look later this week on iOS 14 then.
I've not observed any particular slow down on my version of Chrome (85.0.4183.83 (Official Build) (64-bit)) on my mac (macOS Catalina). Can you tell me what's your exact Chrome version (go to chrome://version in the address bar)?

Also if you could do a screen recording of the issue on Safari and Chrome desktop, that would be awesome :) For me to understand how bad is the "jittery/low frame rate" and how behaves the "collision issues" (might be linked to the jittery/low frame rate, but I prefer to see that myself).

Sound issues is less worrying to me, surely yet a new Safari restriction that was introduced in version 14.

@beanmatt
Copy link
Author

beanmatt commented Sep 23, 2020

My desktop Chrome version is 85.0.4183.121 (Official Build) (64-bit) on macOS Catalina 10.15.6.

I've gotten screen recordings of Safari (smooth) and Chrome (jittery) on desktop, as well as iOS 13 (smooth) and iOS 14 (jittery). If you look at the clips side by side (and focus somewhere such as the dark green bushes against the blue sky) you can clearly see the issue. There is also a short clip of iOS 14 that shows the small version of the player being able to collide with a coin box but the big version of the player doesn't.

Because they're larger files I've included a link to them on Dropbox. I hope this is acceptable. If not, please let me know of the best way to upload these files. https://www.dropbox.com/sh/lchll4e5wp400ii/AABV-WrW_aQ0aTvhB1s-0uwEa?dl=0

@beanmatt
Copy link
Author

I was able to test the current build of desktop Chrome on a Windows PC (current Windows 10). It worked fine and did not have any issues.

I don't fully know how all the JS files work together to make a game run, but I did try disabling each JS file (in index.html) one at a time to see if it had any effect on this high CPU percentage. Each time it was less than 10%, and only went back up to over 100% when all JS files were enabled. I was trying to pinpoint which one might be causing issues, but with my limited knowledge I wasn't able to figure anything out.

@krunkster
Copy link

krunkster commented Oct 3, 2020

I can confirm these two things as well:

  • jittery/low frame rate
  • wav sounds do not play (but mp3s do)

I tried on iOS13 and iOS14 on separate phones and it's a dramatic difference in performance, and of course the audio working as expected. I haven't seen any collision issues yet, but the performance lag did lead to some timers firing many frames earlier than usual, which leads to some undesirable behavior.

Not sure this helps, but I'm open to testing or gathering data if needed.

@4ian
Copy link
Owner

4ian commented Oct 4, 2020

Thanks @krunkster for chiming in.
I did a quick check on an iPad with iOS 14.0, but it's hard to pinpoint the exact issue.
Could you both confirm the exact version of iOS (Settings > General > About)? I'm updating the iPad to iPadOS 14.0.1 to see if there is a difference.

Wav sounds not playing is weird, but I guess it might be a good idea to encourage everyone to migrate to AAC.
Collision issues should be caused by the bad framerate, that's actually the reason why you can specify the minimum framerate in the game settings (so that the game slow down rather than skipping too much time between frames, that could make some collision to not happen).

I'm still unsure what could be the reason for this jittery framerate, I'll try to profile with the Safari dev tools to see if there is an obvious issue. I hope Safari did not ship with a performance regression/bugs like it happened in the past for webassembly support.

@krunkster
Copy link

My phone is on 14.0 exactly. Apparently there is a 14.0.1 update available but I have not applied it yet.
Also thanks for the min FPS tip... bumping up to 45 min FPS made my games behavior much more reliable on the phone and inline with PC previews. The performance is still bad but the behavior is more predictable.
Sorry you are having the deal with this... seems pretty obviously an Apple issue... thanks for helping us though!

@beanmatt
Copy link
Author

beanmatt commented Oct 5, 2020

I originally noticed this when I updated to 14.0. I have since updated to 14.0.1 and it is still an issue.

I changed all my sounds to MP3. I'll look into AAC.

The minimum FPS in Game Settings > Properties is 20. I changed it to 40 and uploaded to the server and tested it out. Everything was super slow, making the game basically unplayable. Despite that, there still seemed to be noticeable jitteriness.

I did find this from Apple: Safari 14 Release Notes. It seems very cursory, and I'm not tech savvy enough to know what on here might possibly cause an issue with GDevelop. Just linking it here in case it helps.

@4ian
Copy link
Owner

4ian commented Oct 5, 2020

Increasing the min FPS won't solve any performance issue but is just there so that the game don't skip too much frames and things stay a bit more reliable in case of performance drop.

Safari Release Notes are not super helpful.. I'll dig more to see if there are other reports of performance drop outside of GDevelop.

@4ian
Copy link
Owner

4ian commented Oct 5, 2020

Could you both confirm again if the slow down/jittery frame rate is noticeable easily on a few examples? Space shooter, Platformer, Geometry Monster and the Downhill Bike Racing?
Are all of them showing the same issue or only some? This could help me understand if this is due to a specific feature that for some reasons would perform badly in the latest Safari on iOS (for example, Downhill Bike Racing is using the physics engine but not the others).

@beanmatt
Copy link
Author

beanmatt commented Oct 5, 2020

I took screen captures of these four example games on iOS 14 (located here). As you can see they are all jittery. The Downhill Bike Racing and Geometry Monster are slightly less noticeable, but you can definitely see sputtery and jittering.

@4ian
Copy link
Owner

4ian commented Oct 6, 2020

@beanmatt I think the best chance to debug this would be for me to try the game that you have shown on the "iOS 14.mov" video: https://www.dropbox.com/sh/lchll4e5wp400ii/AAB0vMODGXhanVRtyeaRJ2m7a/Personal%20Examples?dl=0&preview=iOS+14.mov&subfolder_nav_tracking=1

I've been to ozzysquest.com, I guess it's one of the two games? (nice games btw! We should add them to the GDevelop game showcase :)). Is the whole game as slow as on the video, or just a certain level? I've been trying on my iPad but unsure I can't spot anything. I've still profiled some unnecessary updates that could speed up a bit the games (at least avoid messing with frames rendered on the screen). It's a long shot though, does not seem linked to iOS 14.

@beanmatt
Copy link
Author

beanmatt commented Oct 6, 2020

Yes, the game in the "iOS 14.mov" video is the "Quest 2" game. Both of the games have the same issues. It is the entire game, not certain levels (you can first notice it when the "instructions" screen fades to black and even the fade to black is jittery). I've not been able to test on an iPad, just iPhone 11 Pros.

Thank you for the compliments! I've enjoyed learning GDevelop over the past year and a half, and I'm quite proud of them. :)

@4ian
Copy link
Owner

4ian commented Oct 6, 2020

There would be one thing that could be helpful, is to get a trace of the performance on your iPhone:

  • activate the developer mode on Safari on your mac: https://support.apple.com/en-gb/guide/safari/sfri20948/mac

  • on your iPhone, enable the Web Inspector for Safari in the Settings: https://www.lifewire.com/activate-the-debug-console-in-safari-445798

  • Connect your iPhone to your mac.

  • Open the game on Safari on your iphone

  • Open Safari on your mac. Go to develop > [your device name] > ozzysquest.com:
    image

  • In the developer console that opened ("Web Inspector"), go to Timelines tab, (right click on the tabs if you don't have it) then - while the game is running - press the red circle on the left to start recording. Stop it after a while:
    image

    Finally, click on Export in the top right, save it somewhere and send it to me (either on GitHub or, if too large, you can find my email on my GitHub profile).

Hopefully this will show what's wrong!

@beanmatt
Copy link
Author

beanmatt commented Oct 7, 2020

I think I've done it right. It's attached in a ZIP file. It's playing through the first level of the game.
ozzysquest.com-recording.json.zip

@krunkster
Copy link

Any discoveries made regarding this issue?

I've tried to collect the debug data as instructed multiple times both connected via lightening cable and over network but as soon as I click "stop" on the timeline data collector it crashes. I can't seem to find a way to stop collection without it crashing... which in turn prevents me from exporting the timeline data.

I have done some rudimentary analysis of the console app connected to the iOS device and the only suspicious thing I've found so far is an excessive number of these messages whenever a touch event occurs:
0x1111ffb80 - [PID=19558, throttler=0x1057cc4d8] ProcessThrottler::Activity::invalidate: Ending background activity / 'WebPageProxy::handlePreventableTouchEvent'
I'm not sure this is really anything though related to performance issues on ios 14.

@beanmatt
Copy link
Author

I’m still having the same issues. I’m not savvy enough about the tech side of how all this works to troubleshoot any further in my own (I attached my timeline recording above if that helps shed light on anything). For what it’s worth, I upgraded to both 14.1 and 14.2 when they came out hoping it would resolve the issue, but it didn’t.

@4ian
Copy link
Owner

4ian commented Nov 30, 2020

Any discoveries made regarding this issue?

Not much unfortunately. I've being able to verify that the Platformer starter game is butter smooth on iOS 13 (iPhone 7), while it has visible stutter on iOS 14 (iPad 7e. gen).
I don't see any change in the Pixi.js library used for rendering between our version (5.3.3) and the new one (5.4.0) that would resolve an iOS Safari performance issue.

Last time I checked some timelines, there were no obvious part taking a large time that would explain the stuttering.

I found an issue in the audio playback library (goldfire/howler.js#1415) that would solve the issue of wav files not played on Safari 14. I'll release a new version of GDevelop with this fix.

@4ian
Copy link
Owner

4ian commented Dec 2, 2020

I've tried disabling entirely the audio system but stutterings are persisting (and still not showing on iOS 13) - so it's probably not the cause of the regression. A timeline from the Safari developer tools does not indicate anything that would take a long time (apart from sometimes long garbage collection but not sure if this can be the problem here, as stuttering are more frequents).

@4ian
Copy link
Owner

4ian commented Dec 12, 2020

Next version of GDevelop should fix issues related to wav files. For the stuttering, I've made a very simple game with just the platformer background and an event that move the camera. There is noticeable stuttering on iOS 14 - while the whole game loop is easily running under 1ms. This seems to indicate a deeper issue, maybe related to Safari. Will try to find what could be going on.

@4ian
Copy link
Owner

4ian commented Feb 3, 2021

Back again on this, seems like a iOS 14 WebG/Pixi.js regression: https://www.html5gamedevs.com/topic/46868-pixijs-has-low-fps-in-ios14/

Should hopefully get a fix in beta 105 so that performance is back to full speed on iOS 14!

@beanmatt
Copy link
Author

beanmatt commented Feb 3, 2021

Horray! Thank you so much for continuing to look into this. Hopefully they're able to release a fix soon. Once the Pixi fix is released, will we need to update those js files ourselves or will it be incorporated into GDevelop?

@4ian
Copy link
Owner

4ian commented Feb 3, 2021

I first hope that Pixi.js folks will be able to find the issue, if there is indeed one. Then it will be pulled in the next version of GDevelop (though manual patching of some files could maybe work)

@4ian 4ian mentioned this issue Mar 18, 2021
7 tasks
@4ian
Copy link
Owner

4ian commented Mar 22, 2021

We have report on the forum from a user that patched his game with Pixi.js v6 and I've feedback from another user that used a test version with Pixi.js v6. Both indicate that their games are now smooth again :)
This means that despite these months of wait we have a solution. I'll first finish to stabilize beta 106 and we can hope to have a version with Pixi v6 in the coming weeks.
If you want to give a try, you can look at links in #2447

@4ian 4ian closed this as completed in #2447 Apr 9, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants