Safari Performance Issue

Hi guys,
I have a game full of spine animations and it works perfectly on Chrome and Firefox but has big performance issues on Safari. Is it a known issue? If yes are there any workarounds? Cocos Creator 2.0.10 Im testing on MacBook Pro 16gb Ram 4gb video. Game works good even on safari on Iphone 5.
@jare @slackmoehrle

I need to defer to @jare and/or @PP_Pro on performance issues.

@slackmoehrle Additional info. If I play in preview mode and use most of the devices - performance is good, but if I choose only Apple iPad Pro 12.9-inch - FrameRate drops, even though the Frame time is 3ms.
On safari when I decrease the width of the window , it performs well, but when the width increases some value it drops. I remember similar issue on old version. Here is the link to the issue. FPS issue based on the size of the canvas

cc.view.enableRatina(false) fixes the problem, but why is this happening?

On macbook with disabled retina the quality is still good, so I made this workaround in main.js

if (cc.sys.os !== cc.sys.OS_ANDROID || cc.sys.browserType !== cc.sys.BROWSER_TYPE_UC) {
            if (!(cc.sys.os === cc.sys.OS_OSX && cc.sys.browserType === cc.sys.BROWSER_TYPE_SAFARI)) {
                cc.view.enableRetina(true);
            }
        }

but its a big issue for us because we should release our game soon. Is there any information about this topic? @slackmoehrle @jare @PP_Pro

The problem is connected with the semi transparent textures. If Im rendering textures with transparency (gradient) in my game, performance of my computer drops drastically. So something is wrong with alpha blending in safari big resolutions. When I remove those textures from the game, the issue disappears.
@slackmoehrle

Let’s ask the engineering team to take a look at this. Thanks for providing useful details.

so far no news? It’s a critical issue in general I think. It doesn’t have a high priority? @slackmoehrle
Big resolution safari browser on macbooks has problems with performance when rendering transparent textures.

Don’t worry. Engineering it aware of this topic. They are finalizing Creator 2.1.2.

It seems like it’s the same issue you mentioned above. If you remove semi transparent areas from the texture, Creator will trim the image so the actual rendering size will smaller than it was before. That’s why the performance issue will disappear. But why only safari has the problem? I have no idea. We will explore that question.

2 Likes

Actually it seems it is happening on chrome too. But on safari the performance drops drastically. Chrome is not so awful but bad. I would like to know when are you going to publish the new build of Cocos 2.1.2, because we plan to release our product and it would be better to do that without this issue?
@jare @slackmoehrle

Sorry @Khachatur we have not find out how to fix the issue. We will explorer the issue next week, hope we could improve Safari performance in v2.1.3.

hi @Khachatur

This is the result of my 2.0.10 test :【 Safari is closer to 60 FPS compared with chrome 】

The number of test sprites is 15000

chrome :43.31 fps

image

safari :59.96 fps

mac:

image

Hi @knox
Are you tweening also their opacities ? I assume the problem is based on the alpha blending. So to reproduce the issue you need a lot of transparent textures. If you tween the opacity it’s even better. I created a quick test. This example is not so complex and problematic like my project but anyway if you play it on Safari full screen, you will notice some performance issues while the time of frame is still 1.5 ms, but framerate is less than 60, and my computer becomes crazy and slow after running this on Safari.

(my computer is strong)
This is the link to that test project
https://drive.google.com/open?id=1r7m6L15E7ryHL3_aZV_sc9_QyL50THIt

Thanks for your test demo, I will try to see it

//--------------------

This is the result of my 2.1.2 test,web-mobile

chrome:

safari:

You can download Cocos Creator 2.1.2 for testing


on my macbook safari it performs really bad. Cocos v2.1.2

are you playing full screen? the issue exists only on big resolutions

What code did you use to open full screen?

this open cc.screen.requestFullScreen();

image

I don’t use code for it. Just I resize the browser to full screen. When I decrease the size of the window, the problem disappears.

Anyway this test project is really a quick and dirty test. My games have a lot of spine animations and semitransparent textures and actions, and they have a big problem on safari and even chrome too (safari is worse). When I resize the browser window and make it smaller ~x1.3 times the issue disappears. Other wise with Frame time 3-5 my FPS is 26.

Thank you for the information. I will follow up the investigation