Vue-material: Low framerate

[plievone]

Hi, vue-material seems very promising! Could you look into why framerate is quite low on mobile Chrome (Android 5)? For example if you compare opening

• https://marcosmoura.github.io/vue-material/#/components/sidenav

in mobile browser and toggling sidebar/drawer, and then compare it to some other vue.js material implementations such as

• http://quasar-framework.org/quasar-play/android/index.html#/showcase/layout/drawer
• https://myronliu347.github.io/vue-carbon/#!/ (sidebar on mobile)
• http://material-ui-vue.jackyang.me/docs/index.html#!/components/side-nav/side-nav
• http://johnleider.com/vue-materials-docs/#! (sidebar on mobile)
• https://josephuspaye.github.io/Keen-UI/#/ui-modal-docs (sidebar on mobile)
• http://vue-comps.github.io/vue-side-nav/#/basic
• http://appcomponents.org/material-components/#!/modals/showcase (sidebar on mobile)
• http://posva.net/vue-mdl/#!/menus (sidebar on mobile)
• http://loujiayu.github.io/vue-material-design/#!/components/dialog (sidebar on mobile)

Most run with much higher framerate. It is not only the sidebar, but other animations too, the problem is just most visible with the sidebar action. Perhaps there is a simple change that would fix it across the framework?

[marcosmoura]

Oh. I see. Sorry about that. I need to investigate this better but I think that the problem is happening when the toggle class apply a different box-shadow with other properties. I have noticed this behavior with tabs too. I will prioritize and fix this in the very next release.

Thank you for reporting this!

[plievone]

That's good to hear! Also ripple effects could be one source of performance problems. So could the documentation site have a global option (query parameter, local storage toggle, something else) to disable ripple effects easily for trying out in mobile. In any case, perhaps you could expose this line https://github.com/marcosmoura/vue-material/blob/b5bdea0/src/core/index.js#L23 via some option parameter so that one can opt out of ripples. As a quick change one can also disable ripple on that hamburger menu button in docs, as currently that may invalidate layout unnecessarily behind the opening menu (haven't looked much yet). I'm looking forward to follow and experiment with vue-material, quality work.

[marcosmoura]

The problem was found and was related with box shadow transition. Unfortunately this will be delayed to v0.4.0 because needs more tests and the boost that this fix will provide will be applied to other components.

[marcosmoura]

Well. Thiss is quite fixed. For the sidenav it's done. For the other components, since they need some other improvements, I will delay this a little bit. Notice that this lib is in constant development, so a lot of things will be improved/changed until the first stable version.
Thanks!

[mubaidr]

I am experience similar issue with latest build (0.7.1).
i7 3.4Ghz with 8Gb Ram
Windows 10 64bit

With header, toolbar and 11 cards in a page frame-rate drops in Chrome, Opera. But Edge/IE has horrible performance.

May i know how you will approach the fix for this issue?
@marcosmoura Can we use border images in-place of box-shadow to fix performance related issues? (Considering that we have 24 levels of shadow, this might be difficult.)

[janschloss]

Same here, especially for the select component.