Materialize: SideNav and Modals Transition is not smooth in mobile device

Created on 5 Nov 2015  路  19Comments  路  Source: Dogfalo/materialize

I make some test to create an app based on Materialize with Cordova, I use android platform with minimum requirement KitKat, however the animation/transition of SideNav and modals are stutter.

I though it was because Cordova, but I tested with built-in browser and Google Chrome, it's still lags so much.

I hope Materialize would faster and reliable on mobile device in future version!

Most helpful comment

Now with materialize V1 it still remains too slow

All 19 comments

Yes, we do plan on optimizing many of our components. Many were written quickly in the early stages of the project, but it takes time to go back over all of them and improve them. I know at least for side-nav that we transition the left or right property which is not good performance wise. Eventually we will switch to using transform translate.

If anyone wants to take a crack at making the switch to animating with transform: translate it would be highly appreciated.

I modified it, so it works with translateX instead of left and with some custom css, but i didn't modify it for edge: right yet. Transition is smooth on mobile now.

Yes I agree, trying to build an app for Cordova is quite laggy at this time.

Chrome works fine enough, I hope you guys optimize it asap cause this is quite a helper :)

I made it for both sides and fixed css as well, just have to make a pull request.

Looking forward to it @ElpySites

@ElpySites Can't wait for this PR :)))

still waiting...

Still waiting for a pull ...

Maybe this project can use Animate.css, seems fast...

https://daneden.github.io/animate.css/

Not sure it's really necessary. Most of the animations in material are fairly simple, it's just that a lot of them are done in js, and not necessarily optimized. The side nav needs JS because we need to be able to drag it.

Hope the PR could be accepted soon... this issue prevents me to use Materialize in my production project, since the prototyping was pretty laggy on mobile browser, specially on Android devices...

Same here, that's why I use a custom fork of Materialize now. Materialize needs more admins =/

There were some problems with the PR due to some complexity around drag events, I created and pushed a fix here: df0c80fbd6c7f42e5d597464ce6962fbb8e3dfea

Sorry for the delay everyone.

still incredbly slow on a very modern anddroid on chrome like 1FPS/second both for navbar and modal (transition to open it and dragging)

The sidenav is also slow on my cordova project.

Me too I'm using materializecss .Navigation drawer is not perfect in my cordova app.

Is it possible to use JS only for dragging the sidenav and use CSS animations when clicking the sidenav open button?

Now with materialize V1 it still remains too slow

Too slow and laggy

Was this page helpful?
0 / 5 - 0 ratings

Related issues

PhillippOhlandt picture PhillippOhlandt  路  3Comments

artur99 picture artur99  路  3Comments

onigetoc picture onigetoc  路  3Comments

heshamelmasry77 picture heshamelmasry77  路  3Comments

djensen47 picture djensen47  路  3Comments