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
Related
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...>
I have an issue with GWT Bootstrap Responsive NavBar on Android device as described below.
I am developing an application using GWT Bootstrap (version 2.2.1.0 & 2.3.2.0-SNAPSHOT) Responsive NavBar . When testing on my Android device, menu items in NavBar is collapsed. First, click on the menu, these menu items is shown on the screen. Click the menu again to collapse it. It works normally.
However, the issue when clicking the menu again, there are NO menu items shown.
I also try to open http://gwtbootstrap.github.io from my Android device, it has the same issue. See the screenshot below.
- Screenshot for the first click:
- Screenshot for third click:
This issue is on my Nexus 4 device, I am not sure whether it works (or does not work) on your Android device.
My question is whether it is GWT Bootstrap bug or Twitter Bootstrap bug? How to solve this issue?
Thanks
I had the same issue using Bootstrap v2.3.1 using the .less files. It took me a while but I realised this bug was only happening on my android devices in portrait view.
I fixed it by removing the following line of CSS on the .nav-collapse class, at the media query max-width:480px, in the file responsive-767px-max.less line 1064:
-webkit-transform: translate3d(0, 0, 0);
I'm using MediaElement.js to make a responsive web application.
However, I have some issues to make it work on Android Chrome browser (I have a Samsung Galaxy S3).
When I try to open a video, the fullscreen button is misplaced: probably the "toolbar" elements are too big, and the last button (i.e. fullscreen) get placed in the next line.
It happens even in fullscreen mode: the fullscreen button disappears.
The same behaviour can be seen in the demo video on mediaelement.js website too.
Looking at the site on Chrome for Android's DevTools the button has an off by one error.
To learn more on how to do this yourself: https://developers.google.com/chrome-developer-tools/docs/remote-debugging
If you open devtools, you can alter the video scrubber (The bar in the middle) and reduce the size by a pixel and it's fixed.
I'd raise a bug with MediaElement.js - if their CSS is 100% correct then it may be a Chrome specific bug in which case a bug should be raised at crbug.com
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.
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