Drawing and Animation Issues With Phonegap

[petermcclymont]

I am running this code here in PhoneGap,

http://jsfiddle.net/petermcclymont/3pGQg/3/

I notice in jsfiddle I can see when you click the item 'sync' in the list that the rest of the items are moved down by 1 pixel.

When I put this into phone gap on an Android the problem is worse. The whole page is moved down by one pixel when it is scrolling between pages.

On the android emulator the problem seems to occur in landscape and portrait, but on my actual android it only happens in landscape.

As a note the sync button wasn't always responsive before on my Android is that an issue that was recently fixed?

[toddparker]

@petermcclymont - That is running beta 1, does this still happen on 1.0?
http://jsfiddle.net/3pGQg/4/

[petermcclymont]

I have updated it to use 1.0,

http://jsfiddle.net/petermcclymont/3pGQg/5/

And it is behaving the same. I can't see any difference.

Is there anything else you need, from what I can tell I have made my PhoneGap application exactly how it says to do it in this tutorial,

http://phonegap.com/start#android

[toddparker]

Why is there a data-position="inline" on the headers? That's not valid for headers, only buttons.

On Jan 19, 2012, at 7:27 PM, "petermcclymont" reply@reply.github.com wrote:

I have updated it to use 1.0,

http://jsfiddle.net/petermcclymont/3pGQg/5/

And it is behaving the same. I can't see any difference.

Is there anything else you need, from what I can tell I have made my PhoneGap application exactly how it says to do it in this tutorial,

http://phonegap.com/start#android

---

Reply to this email directly or view it on GitHub:
#3467 (comment)

[petermcclymont]

Is this what you are talking about?

http://jquerymobile.com/demos/1.0/docs/toolbars/docs-headers.html

The documentation says to do it. Happy to remove it if that is causing the issue.

[toddparker]

Yikes, that's out of date. It probably won't do harm, but isn't needed.

On Jan 19, 2012, at 7:48 PM, "petermcclymont" reply@reply.github.com wrote:

Is this what you are talking about?

http://jquerymobile.com/demos/1.0/docs/toolbars/docs-headers.html

The documentation says to do it. Happy to remove it if that is causing the issue.

---

Reply to this email directly or view it on GitHub:
#3467 (comment)

[toddparker]

Ok, I've updated the docs. You can demo the latest build here:
http://code.jquery.com/mobile/latest/demos/

Did you mention what version of Android you're testing on? I just heard on another ticket that in 4.0, disabling hardware acceleration in an app made transitions smoother. Gotta love Android.

[petermcclymont]

Sure. I am using Android 4.0 in the emulator, and android 2.3.5 on my phone.

Also if I look here,

http://code.jquery.com/mobile/latest/demos/docs/toolbars/docs-headers.html

It is still saying to put data-position="inline" on the headers, under the adding buttons section onward.

Thanks, Peter.

[petermcclymont]

Oh, you mention disabling hardware acceleration, I did have to add something to the CSS to make the animation between pages smooth. Don't have it in front of me though I can't remember what it was.

[petermcclymont]

In case it matters, this is the CSS that I mentioned. This makes the transitions smooth between pages. I'll have a closer look and see whether there is anything more specific that has caused the drawing issues.

.ui-page {
-webkit-backface-visibility: hidden;
}

[toddparker]

Hi @petermcclymont - have you tested 1.1.0 to see if the changes we landed there improve things for you?

[jaspermdegroot]

Closing as duplicate of #5488. I posted an updated version of the test page there.