CODEWITHSUNDEEP
cordovajquery-mobilepanel
Cenobyte321
Cenobyte321

Reputation: 479

Slow JQuery Mobile panels in Phonegap

I'm implementing a slide panel in JQM for a Phonegap application, but for some reason when I open try opening it on Android 4.x it takes 1500ms to appear, but in Android 2.x, iOS and Blackberry it shows instantaneously.

$(document).on("touchstart","img#openLeft", function()
{
     $('#mydiv').panel("toggle");
}

Could you please tell me what strategy can I follow to make the panel appear faster, without removing the sliding animation?

Thanks!

PS I am using JQuery Mobile 1.3.0

Upvotes: 2

Views: 3900

Answers (2)

Cenobyte321
Cenobyte321

Reputation: 479

I ended up modifying JQM-1.3.0.css to fix this problem, turns out they were not hardware accelerated.

on:

  • @-webkit-keyframes slideinfromright
  • @-moz-keyframes slideinfromright
  • @keyframes slideinfromright
  • @-webkit-keyframes slideinfromleft
  • @-moz-keyframes slideinfromleft
  • @keyframes slideinfromleft
  • @-webkit-keyframes slideouttoleft
  • @-moz-keyframes slideouttoleft
  • @keyframes slideouttoleft
  • @-webkit-keyframes slideouttoright
  • @-moz-keyframes slideouttoright
  • @keyframes slideouttoright
  • .slide.out
  • .slide.in
  • .slide.out.reverse
  • .slide.in.reverse

I changed all the -webkit-transform: translateX(x); for -webkit-transform: translate3d(x,0,0);

and I also changed my animation to data-display="push" which seems to work faster than data-display="reveal" because it starts the animation while translating instead of waiting for the content to translate and show it afterwards.

Upvotes: 9

Jaya Mayu
Jaya Mayu

Reputation: 17247

As given by documentation, these are accelerated by hardware. May be your 4.0 device is under-performing.

You can disable animation by adding data-animate="false" to pane's div. It is mentioned in the documentation.

Upvotes: 0

Related Questions