WebGL - iphone, ipad and other devices web page crash

Phaser 3
1

Hey there,

I am sending our latest slot game, where we use WebGL + Spine for the first time.
Link

The problem:
We are facing a crash on iPhone 6, 7 older iPad Air and some low-end Android phones, but for Android it happens very rarely. Also, on Chrome iOS or Mac, performance with WebGL is just terrible.
On iphones the game reloads once and then crashes before even the game state is reached.
On Ipad, the game loads, but shortly after loading it reloads and then crashes.

On Chrome we get the “Oh Snap” page.
On Safari we get "A problem repeatedly occurred " page.
For these devices we force Canvas, but I do not like this solution, as before crashing, on Ipads the game looks great.

Implementation details:

  1. We use large images - the background is ~3000 x 3000 with some spritetesheets < 2048 x 2048 .
  2. Config: 
     const config: GameConfig = {

          type: renderer, // Calculated depending on device
          render: {
            failIfMajorPerformanceCaveat: true,
          },
          scale: {
            fullscreenTarget: 'app-root',
            parent: 'the-canvas',
            mode: Phaser.Scale.NONE,
            width: width,
            height: height,
          },
          audio: {
            disableWebAudio: true,
            noAudio: true
          },
          plugins: {
            scene: [
              {key: 'SpinePlugin', plugin: (window as any).SpinePlugin, mapping: 'spine', start: true, sceneKey: 'spine'}
            ]
          }
        };
  1. Resizing is done manually, where we use the full resolution / DPR of the device.
  2. In general, there are masks, camera movement and zooming, images, spritesheets, animations, spine, particles … but none of them

Thoughts & Questions:

  1. Do you have experience with similar issues?
  2. Any way to debug this crash (nothing in developer tools)
  3. I suspect it is a RAM problem, but I really do not know.

Thank you in advance for your help.
–Martin

2

I too have crashes when using Safari on mac and iOS. I’ve been able to reduce (or eliminate I hope) crashes by using canvas instead of WebGL.

3

any updates on this? I’m working on a project with very large assets that doesn’t want to run on iOS devices.

4

Update: resolved the issue I was having that I believe is the same as the one in this thread, as well as the super low fps on only iOS devices (android 60fps while iOS4 fps type of issue). I’m lazy and swamped with work, so just making a note here in case anybody else has these issues then let me know and I can tell you what worked for us =)

cheers

5

Oh? Is there a fix for this?
I tried a few things such as disabling antialiasing, setting batchSize to 512.
They work to an extent, but I can’t seem to prevent iOS browsers from crashing in certain situations.

6

You could always just cut the images down and display them in sequenced pieces instead of a whole large graphic. I’ve noticed that android devices seem to display black squares with animations that are larger than certain dimensions and the only way to get around it is to cut the images down and show them in parts to make the full image.

7

Please share your solution, the problem is still relevant.