I am trying to get an app working with a fixed background image, so when it scrolls the image stays in the same position.
On desktop browsers this works fine. When i use phonegap and run it on my android device, the background image jumps and then reappears in the correct position whenever you scroll the page.
I have looked through stack overflow and through google but have not come up with a fix for this.
I have tried adding the background image to .ui-page, body and also with adding a div around it, but whenever you go to scroll the page in the app on android the background jumps.
I have also tried changing the position to link it to top, center bottom etc, but nothing is working.
The header and footer are fixed and am using jquery mobile 1.1, with phonegap 1.2.
If anything else is needed I will share what I can
Phonegap uses the androids native browser and position:fixed is only supported since android browser version 2.2.
Source: http://caniuse.com/css-fixed
Related
I'm using Cordova to create an Android application.
I have noticed that when overflow of a div become visible (it is set to auto), the div become blur. This happens only on Android. What is the problem?
Click here to see screenshot
Click here to see the code
My app uses Cordova 3.5, Backbone JS, JQuery and Appframework (former jqMobi). After I add some data to a chat dialog by keyboard the app does not flip correct back in original view. Half of the screen is filled with a grey panel.
This works fine in android version. After changing the orientation, the view is correct again.
Try to set Margin="1,0,0,0" in MainPage.xaml in <my:CordovaView...>
All!
I have a perplexing problem that occurs only on some specific phones-- but they're the phones that my customer wants the app written for, so I need to deliver. :-/ The site that I am working on consists of fourteen jQuery mobile "pages", and two of them are exhibiting the following behavior:
I have an issue where pages being loaded from the browser's cache-- whether by pressing the browser's "back button" or simply reloading a page that has been previously rendered-- is broken:
While the page renders correctly, the bottom of the page is either "cut off" and can't be scrolled to, or a medium amount of "new" blank content is inserted at the bottom of the page.
When the latter occurs, the UI controls are "shifted" by the length of the new blank content compared to where the user was tapping: If an inch was "inserted" when the page is displayed for the second time, tapping on the screen triggers a click event in the location an inch "higher" on the page than where my finger touched the screen.
I will note that this problem appears to occur only on pages that have enough content to scroll off screen; pages that have small amounts of content do not suffer this problem. There is no dynamic content being added to these pages.
It appears that once a page is created and then a different page is displayed, something breaks in the DOM when the previously-created page is redisplayed.
The mobile sites run perfectly in Chrome and Firefox on a PC; they manifest themselves only on certain Android phones. One phone model that is giving me particular headaches is a Samsung SGH-I437P running Android 4.1.2.
I'm using the latest versions of jQuery-- rev 1.9.1 of jQuery, and 1.3.2 of jQuery mobile.
What I think I need to do is to tell jQuery to completely rebuild the page, but am unsure if this is even feasible, as the since the page has already been loaded into the DOM with all the jQuery mobile "embellishments"-- so there's no "bare-bones non-jQuery-mobile" HTML to rebuild the page with.
However, searching for page rebuilding / reloading hasn't turned up any concrete hits-- there was a way to do this with older versions of jQuery Mobile, but this does not work for the latest version.
Has anyone else experienced this behavior and know how to counteract it? My team of two have been focused on this for weeks to no avail.
I am working on an Android/Cordova app with an embedded map view using leaflet.js. The device I am using is an Nexus 7. The map is loaded using a TileLayer and all is good until... I click on a form select control in a form and the native Android picker appears. From there on the map tiles are all shifted a few pixels in both x and y direction. When I run the web app in the Chrome browser on the same device there is no issue. Seems isolated to with the Cordova DroidGap or Android WebView. Looks like something weird is going on in either the DOM or WebView container which throws the tile images off. Tried inspecting the map container size before and after the select was clicked but there is no diference. Tried logging the DOM and same in both case its identical.
Anyone have any other suggestions where to look?
Is there any way to disable this native select picker?
WOOOOHOOO! Found it... or a solution that is. Still not too sure what the root of the issue is. To fix the problem you need to set leaflet's global L_DISABLE_3D switch to true.
I can replicated the issue in a stripped down version of my app which only had bootstrap, leaflet and cordova as dependencies. The app has a navbar with a dropdown nav item in the first row and a leaflet map in the second row. The issue only happens when its hosted in a cordova app i.e. webview.
Note: I cannot replicate the issue in either on a mobile or desktop browser.
To reproduce the issue you need to 1). click on the navbar dropdown (Account) to make the menu appear 2).then touch the map. The result will be an illusion that the tile grow in size and therefore distorting the map i.e. roads do not line up anymore and labels get cut-off. I have logged the image size before and after the trigger and got the same size. This leads me to believe hat the issue relates to pixel density or some other graphical phenomenon that I don't understand.
Still at this point it s unclear if the issue relates to leaflet, cordova, or the Android native WebView.
UPDATE: see comments below for a better solution.
Issue in Android 4.0.3
I am using Phonegap 1.6.1.
jQuery Mobile 1.1.0
When the app is opened for the first time, or when the page transitions (page change), it shows a white screen.
If anybody has any idea or solution, please share with us.
Thanks.