During page transitions white background is flickering which looks very bad in the app.....
I've tried setting the following CSS property
-webkit-backface-visibility: hidden;
as well as
.ui-mobile-viewport-transitioning,
.ui-mobile-viewport-transitioning .ui-page {
overflow: visible;
}
But both of these does not work in my case....
I'm using android 4.1 and jquery in my app...
Anyone has any suggestions, I would be thankful to you.....
If you don't want page transitions, maybe you need to use
$.mobile.changePage('#yourPage', "none");
???
If doesn't resolved, see http://jquerymobile.com/demos/1.2.0/docs/pages/loader.html
Related
When I log in to the app, I see the Webview starting from left to right.
I tried to change through the left-to-right management panel - it didn't work for me.
I tried some guides and it also did not work for me.
Anyone know where I'm supposed to do this from? From the website files or through Android Studio? And if so, how exactly?
I think by adding the following css code in your website's <style> tag you can achieve right to left direction.
body { direction: rtl; }
Or change your <html> tag into
<html dir="rtl">
If it doesn't work, let me know.
I've done almost everything but seems like I cant get rid of the white space between header and status bar as seen in the image
I am using Intel XDK version 3987 using Cordova plugin.
Any help to eliminate this error will be highly appreciated!
This is my source code:
pastebin.com/fPWJmiD8
To me it seems that your header-elements (data-role="header") have got a border-width of 1px that causes the whole content to move downwards.
Have you already tried to remove the border from each header?
CSS:
.ui-header{
border: none !important;
}
Hope this helps.
After several days of headbanging, trials and errors and detective work, I was able to find the real culprit.
The problem was caused because jQuery Mobile framework automatically on the runtime added the following classes to the header div having data-role="header":
class="ui-header ui-bar-inherit"
Those classes created an unwanted margin between the status bar and the header.
However, this problem was solved by removing those classes using jQuery during the runtime execution of the application.
I have a very odd problem that doesn't happen in Chrome for Android, but it does happen when using a web view in an application in less than Android 4.4
The bug is:
When tapping in a 147px area near the sidebar, it causes the sidebar to open. This is because there is :hover on #sidebar. It is unexpected because the width is only 47px. It appears to be caused by overflow-y:auto. Removing this fixes the problem (But breaks the application as I need the scrolling)
I am using Android 4.3. It does NOT happen in 4.4 because the web view rendering engine is different.
The following behavior happens. I have a #sidebar that is collapsed at 47px
I have the following css.
#sidebar:hover
{
width:175px;
}
#sidebar
{
width:47px;
overflow-y:auto !important;
}
Here is a visual of the problem:
I am looking for a way to fix this and still retain functionality of overflow: auto
I found a workaround as this seems like a browser bug. I ended up doing min-height: 1000px on #sidebar instead of doing the overflow, this is not perfect but it works
On this site http://creeight.se/stackExample1/ the vertical dropdown menu works in my desktop browsers (Chrome,FF,IE10) but it's really buggy in Chrome for android. The menu uses .slideDown() to open submenus.
You see the problem if you open: "Bloggen - arkiv" then "2014".
An interesting thing is that if you scroll the page just a little bit down, it suddenly looks fine.
Fixed it.
In my css I had overflow: hidden; on all my li tags. I removed it and now it works.
I am building a phonegap app for android and have a vertical scroll issue. It is similar to Phonegap vertical scroll. I use and fix on android 2.3 but it happen on another phone using android 4.0. You can see video http://www.youtube.com/watch?v=SADCFRoxj4s at 00:10. How can i do to removing it and highlight when pull the scroll?
p/s : it still happen on the build for IOS. I use phonegap build online to build it
You want to remove highlight?
* { -webkit-tap-highlight-color: rgba(0,0,0,0); }
You want to remove scrollbar? Adjust you container to fit webview size. If you have no luck with this you can still try to hack into the android webview and disable scrolling
webView.setVerticalScrollBarEnabled(false);
Read:
http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/css3-animations-the-hiccups-and-bugs-youll-want-to-avoid/
http://daneden.me/2011/12/putting-up-with-androids-bullshit/