[Mobile menu] Is it smooth on your device?

[querschlaeger]

Hello,

just want to ask if the mobile menu is smooth on your device?

I have a Nexus 5 and sadly it stutters (not much but noticeable) on Chrome (default browser).

[GriefCode]

19 minutes ago, querschlaeger said:

Hello,

just want to ask if the mobile menu is smooth on your device?

I have a Nexus 5 and sadly it stutters (not much but noticeable) on Chrome (default browser).

Experience the same issue.

After a short look, IPS is probably using the recommend way for animations and transition to offer also a smooth mobile experience. I'm talking of creating CSS animations instead of using javascript or jQuery animations.

I got a smartphone with 4GB RAM and an Octa-core, so its powerful enough to show smooth animations, but i guess its natively not able because the rendering process is not that good on a mobile device (i do not know that, i just guess it).
They even used the trick with loading the 3d engine (using rule: transform3d(0,0,0);) which does force the hardware acceleration.

I think there is already the best possible option used and we probably need to live with that tweak, its the best you can do for a mobile website (afaik, and i worked alot with mobile design/animations etc.)

Regards

[LaCollision]

2 hours ago, querschlaeger said:

Hello,

just want to ask if the mobile menu is smooth on your device?

I have a Nexus 5 and sadly it stutters (not much but noticeable) on Chrome (default browser).

 

Same here on an iPhone 6 Plus!

[querschlaeger]

2 hours ago, Michael Schneider said:

I think there is already the best possible option used and we probably need to live with that tweak, its the best you can do for a mobile website (afaik, and i worked alot with mobile design/animations etc.)

It stutters and we have to live with it? Other sites can do huge mobile menus (with sub menus too) smooth.

[GriefCode]

4 hours ago, querschlaeger said:

It stutters and we have to live with it? Other sites can do huge mobile menus (with sub menus too) smooth.

Post an example

[querschlaeger]

http://mmenu.frebsite.nl/

No stutters on my Nexus 5 - also with energy saving mode on (lowering CPU power).

[GriefCode]

And probably die with jquery which actually sucks. Jquery is mainly one of the worst frameworks which where ever invented and released. (I guess only advanced devs can share that opinion, for beginners its easy and a good start)

However i rethought right now about that a little bit. And i actually got a but confused. The topic earlier was made in a hurry and i didnt took the time to think about it.

They include the hadwae acceleration, but actually define a custom animation in CSS which may actually generate this stutters. I will probably take a closer look tomorrow.

Th best way todo something like this is actually having a hidden checkbox with the menu icon as label and hide the checkbox. It would look somewhat like this (im on mobile so dont blame me for any formatting):

label.menu-indicator + input[type=checkbox] { display:none;}

ul.mobile-menu{ position:fixed;right:0;bottom:0;top:0;width:200px;margin-right:-200px;transition:0.5s all;}

label.menu-indicator + input:checked + ul.mobile-menu{ margin-right:0;}

Pretty simple and should actually create a smooth animation, also on mobile view.

As said, i will look tomorrow into this. Its already 2am  (and from your name it seems that ur also german ;-))

[querschlaeger]

10 hours ago, Michael Schneider said:

And probably die with jquery which actually sucks.

But jQuery is build into IPS root JS library. So if jQuery die, Invision has to rebuild (or convert) a lot of other features too.

So I see no reason not to use jQuery for a smooth menu - but only if this helps (with the example I just wanted to show that smooth menus are possible at all - it was never my intention to use jQuery).

[GriefCode]

3 hours ago, querschlaeger said:

But jQuery is build into IPS root JS library. So if jQuery die, Invision has to rebuild (or convert) a lot of other features too.

So I see no reason not to use jQuery for a smooth menu - but only if this helps (with the example I just wanted to show that smooth menus are possible at all - it was never my intention to use jQuery).

jQuery is a wrapper instance for many native javascript functions and nothing else, you can fully replace whoel IPB with native JS and would profit from it. jQuery is making pages slow, proven by dozens of benchmark tests. Lookup new applications which are modern, in beta phases in release states and so on, all do no longer have jQuery. So the rebuild (or convert) would have only a positive side effect for all IPS and their customers.

This is the reason why you shouldn't use jQuery. However, I'm not sure if i make it checkout the menu thingy today. I will do it maybe tomorrow since i got a spare day there ;-)