Vue-material: [core] Low framerate & high memory usage with hardware acceleration enabled

[sandhose]

Steps to reproduce

Navigate around in vue-material's documentation with a webkit-based browser, and hardware-acceleration enabled.

Which browser?

Safari 10.0.3 & Chrome 57 on macOS, on an early 2015 Macbook Pro (with an Intel Iris Graphics 6100)

What is expected?

Consistent framerate across an app (in this case, vue-material's documentation)

What is actually happening?

As in #29, I'm vue-material's doc on Chrome & Safari on macOS, when hardware acceleration is enabled.

It is because there is a lot of compositing layers created by the page. Each .md-ink-ripple is creating a layer because of the will-change property. Also, opening the Chrome devtool's layer panel makes chrome crash, forcing it to disable hardware acceleration.

Each .md-tabs-wrapper is creating a huge layer, because of the width: 9999em property (seriously?), which takes a whole lot of memory, and making repainting really expensive. That's those kind of things that make the framerate drop to ~5fps when switching pages in the documentation.

For example, the buttons page is creating 311 layers on Safari idle, taking 113Mb of GPU memory!

In comparaison, material-ui's documentation creates only 2 layers idle, with a couple more when animating, and takes less that 4Mb of memory.

---

This is I think a really important issue! I'd be happy to investigate further to fix those issues if you need help. I was about to use vue-material for a new project, but can't have those kinds of performance issues in my app, and I don't want to have to monkey-patch vue-material in my project to fix those issues.

[Morgul]

@sandhose I think you bring up some very valid points. (I've noticed some performance issues, but haven't dug into them yet. As bad as these issues might be, it works well enough for what I've needed to use it for so far.)

My recommendation would be to split up the work as best as you can, and submit some PRs. @marcosmoura has only just come back from a vacation, so there's a long backlog of work to get through, and this is still a one man project. (There's some community desire to change this, but it hasn't happened yet.)

I am more than willing to volunteer my time to help test these changes (I have a wide variety of devices to test with), and try to get any wrinkles worked out so we can get the fixes in ASAP.

[pablohpsilva]

I totally agree. I am experiencing some performance issues while working with this framework.
All I could do to avoid them I did but I still can see a lot of laggy behaviors.

@sandhose I can work with you to solve these issues if you want some help.

[Samuell1]

Closing this issue as our focus is on the new 1.0.0 version.