WP8 - Performance issues

[graphefruit]

Hello Team,

like discussed in #7618 I'm creating a new topic to this case.
The main problem is, that animations and events are very delayed and laggy in Windows Phone.
In iOS and Android they work fine.

I've uploaded a small video: https://vid.me/tUyZ.

This video shows a WP with its standard browser. The website is: https://material.angularjs.org/HEAD/demo/list

The WP-Specs:

• Nokia Lumia 820 (sorry not 520)
• Windows Phone 8.1 Update
• Resolution 480x800
• Dual-core 1.5 GHz.
• 1 GB Ram

DevVersion already tested this issue on Browserstack with an Lumia 930 with Win 8.1 but couldn't reproduce this issues linked above.

I mainly think thats because the performance difference.
The Lumia 930 has a Quad-Core 2.2 GHz and 2GB Ram.

Difference: http://www.phonearena.com/phones/compare/Nokia-Lumia-930,Nokia-Lumia-820/phones/8571,7472

Also I've noticed, that simulators mostly can't show the problems like on real devices.

If you need any more information just let me know.

Greetings
Graphefruit

[topherfangio]

We have a similar issue for IE performance which is related to the themes: #7540.

Is there any way you can remove the lines suggested and try it out to see if it's the same issue?

[graphefruit]

@topherfangio First sorry for my delay. I don't know how I could test/change this properly. The issue I showed was on the https://material.angularjs.org website.

I could try to take the latest version angular-material.js and remove those lines there and test it in my actual App. But I can't promise it will work properly.

[graphefruit]

Tried to change the lines in my app (app looked terrible). I enabled all animations and ripple effects (which I disabled manually).
The performance increased. In the dropdown I could see it best, the menu closed much faster as before.
The increasement wasn't drastically but noticeable.
Ripple effects are still laggy with this changes.

Maybe its possible to clone the actual website and make the changes there?
So I could test it with the demopage aswell (don't know how expensive this is on your side)

[topherfangio]

@graphefruit If you have a chance to test it, you should be able to clone this project, run npm install and then gulp watch site --dev. Once it's running, you should be able to find your machine's IP address, and visit it from your phone to test out the performance issues.

You can then make changes to the code and it will refresh the page on your phone after it has compiled everything so you can see if it affects the performance.

I am not sure if anyone on the team even has a Windows phone, so your testing would be very helpful!

[graphefruit]

Hi @topherfangio finally figured it out.
Sorry I'm not used to gulp etc.

Tried to comment out the specific ThemingProvider (like in issue mentioned above)

$mdThemingProvider.theme('default')
    .primaryPalette('indigo')
    .accentPalette('pink')
    .warnPalette('deep-orange')
    .backgroundPalette('grey');
}

This one I commented out in MdCoreConfigure but after this the demo-site crashes, because he can't find the name:
return rgba( (PALETTES[ theme.colors[colorType].name ][hue] || '')[contrast ? 'contrast' : 'value'], opacity );

Tried to dig deeper, but one issue leads to another one...
Any suggestion?

[graphefruit]

Hello again,

I digged a bit more into:

This image shows FPS drops when opening and closing the dropdown below the
-> demo/input -> state

I set my Internet Explorer to:

• Document mode: 10
• Browser profile: Windows Phone
• User agent string: IE10 - Windows Phone 8

After that I tried to climb up to IE 11, and then to normal mode (not windows phone mode)
Result: Same FPS-drop effect.

Floating labels doesn't affect IE much (2 fps~) but dropdowns, the calendar plugin, aswell as the error messages drops the IE to 4-8 fps.

Don't know maybe it helps something.

Greetings
Graphefruit