Sencha Touch renders different in PhoneGap webview than in mobile Safari

I have a Sencha Touch app that works great in desktop Chrome, mobile Safari, and Android's default internet browser.

However, once I wrap it in PhoneGap, some nested TabPanels start rendering with two docks (one at the top and one at the bottom), sub panels don't respect their proper size, and sometimes the entire document shifts up (about the same distance as the UIStatusBar, so I wonder if there is a connection). At this point, I'm not overriding any Objective-C me开发者_如何学Pythonthods and I'm pretty much following the structure of the MVC Sencha Touch PhoneGap example.

All my CSS is included as well as the Sencha CSS.

Has anyone experienced rendering differences like this between mobile Safari and webview after PhoneGap wrapping? If so, and even better, has anyone a fix for such?

EDIT:

I've tried a few things thus far:

• Moving the application JS before/after PhoneGap JS loads
• Changing when/how the document.addEventListener("deviceready"...); is called
• Changing .../css/sencha-touch.css to .../css/apple.css
• Removing item instances from my Viewport's initComponent
• Moving the scripts into the body tag in hopes of them getting the properly rendered document bounds

It seems panels and tabpanels add just fine, but nested tabpanels do not. And remember, these same nested tabpanels were rendering perfectly in all other browsers before the PhoneGap app wrap double-tap claptrap mishap.

Well, I've mostly fixed the appearance differences (minus some minor CSS) I was experiencing, but still have no idea why Sencha renders different in WebView than it does in regular Mobile Safari.

The Sencha changes I made shouldn't affect the way it displays in any other desktop or mobile webkit browser. I ended up simply force-hiding the TabBars of the nested TabPanels (that didn't otherwise render before). I was using other means to set the active items and didn't ever need or see their associated TabBars. (I was using these TabPanels for their available methods and properties, but not their associated TabBars.)

In the affected TabPanels, this prevents the vestigial TabBars from rendering:

tabBar: {
    hidden: true,
    height: 0
},

If anyone has any experience on such rendering differences, still feel free to share for future reference.