I have read 10+ questions concerning this issue, yet no one solved it for me..
I have uploaded the app in a github publich repository, and there is the phone gap build link. I'm testing on PC-Browser (chrome) using "Ripple" simulator, it's working fine. But when I test on my phone (Samsung Note 3), it gives weird transitions other than slide!!
as much as I can tell, it fades then slides, which gives a horrible transition effect. =(...
Please Advice..
[UPDATE] Feel free to edit the repo (if possible)
I couldn't find any suitable solution for this issue but I have something like a hack to overcome it
upgrade your jQuery mobile to JQUERY MOBILE 1.4.0 RC1 or anything above, this will make your animations faster and smoother.
add those lines to your css main file:
/** To fix white flash between transitions**/
.ui-overlay-a {
background-image: url(../img/bg.png) !important;
background-repeat: repeat !important;
background-color: #182633 !important;
}
.ui-page {
-webkit-backface-visibility: hidden;
}
update ".ui-overlay-a" css with corrosponding backgorund color and image.
Related
I have just finished my first website and I uploaded it to Github to test it with a couple different devices. I used html5, css3, a little bit of Javascript and a little bit of jQuery and I tried to make it 100% responsive.
So I checked with a smaller Desktop and the website was just as I intended it to be. I checked with an iPhone 4s and it was perfect, and the same thing happened with the iPhone 6s. However, when I tried it with my Samsung S3 mobile phone I saw that a couple sections of my website were not as I intended.
The main problem was with all linear-gradient's. For example:
background:linear-gradient(to right, #f2f2f2, #f7cf9f);
So instead of being gradient it shows no color at all ("transparent" I'm guessing...). And to clarify, this only happened on the android's default browser, if I opened the website with the Samsung S3 but using chrome everything was as intended.
So could anyone help me by telling me how I could fix this? Thank you very much in advance!
I used for my homepage :
background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0, #3f95ea), color-stop(1, #0066FF));
background-image: -webkit-repeating-linear-gradient(top left, #3f95ea 0%, #0066FF 100%);
background-image: repeating-linear-gradient(to bottom right, #3f95ea 0%, #0066FF 100%);
background-image: -ms-repeating-linear-gradient(top left, #3f95ea 0%, #0066FF 100%);
I have an android app that has has this css for the body background:
html, body {
height:100%
margin: 0;
padding: 0;
color: white;
position: static;
text-align:left;
background: URL(images/aVia_Background_new.png) top center black;
background-repeat:no-repeat;
background-size: cover;
background-attachment:fixed !important;
}
When the page is long enough to be scrolled, the background will scroll right off the screen as the page is traversed downward. It acts as though the background-attachment property is set to scroll, but it certainly isn't. The background works properly when the website is viewed in Google Chrome on my desktop, but for some reason when it's translated to Android via Phonegap, it doesn't work properly. Is this a known issue with Phonegap? And does anyone know anything I could try to remedy this? Thanks to any responses. The more ideas the better.
yes.. the problem is with your `background-attachment:fixed;
As far as I know position:fixed is not working fine. I had the same issue while I was trying to do a fixed header/footer in my app. And used iScroll at last
The Android browser, since 2.2, supports fixed positioning, at least under certain circumstances such as when scaling is turned off. I have a simple HTML file with no JS, but the fixed positioning on three Samsung phones I've tried is simply wrong. Instead of true fixed positioning, the header scrolls out of view then pops back into place after the scrolling is done.
This doesn't happen on the Android SDK emulator for any configuration I've tested (2.2, 2.3, 2.3 x86, 4.0.4). It also doesn't happen when using the WebView in an app on the Samsung phones: in those cases the positioning works as expected.
Is there a way to make the Samsung Android "stock" browser use real fixed positioning?
I've tested:
1. Samsung Galaxy 551, Android 2.2
2. Samsung Galaxy S, Android 2.3
3. Samsung Galaxy S II, Android 2.3
Sample code:
<html>
<head>
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no,width=device-width,height=device-height">
<style>
h1 { position: fixed; top: 0; left: 0; height: 32px; background-color: #CDCDCD; color: black; font-size: 32px; line-height: 32px; padding: 2px; width: 100%; margin: 0;}
p { margin-top: 36px; }
</style>
</head>
<body>
<h1>Header</h1>
<p>Long text goes here</p>
</body>
</html>
The expected behaviour is that the grey header fills the top of the screen and stays put no matter how much you scroll. On Samsung Android browsers it seems to scroll out of view then pop back into place once the scrolling is done, as if the fixed-positioning is being simulated using Javascript, which it isn't.
Edit
Judging by the comments and "answers" it seems that maybe I wasn't clear on what I need. I am looking for a meta tag or css rule/hack or javascript toggle which turns off Samsung's broken fixed-positioning and turns on the Android browser's working fixed-positioning. I am not looking for a Javascript solution that adds broken fixed-positioning to a browser that has no support whatsoever; the Samsung fixed-positioning does that already, it just looks stupid.
Maybe you could consider a different approach that doesn't require fixed positioning...
Add scrolling to the paragraph element instead of on the (default) body element. You can then position the paragraph element just under the header. This will ensure that the header always displays at the top of the page yet allowing you to scroll through the text in the paragraph.
h1 {
height: 20px;
}
p {
position: absolute;
top: 20px;
left: 0px;
right: 0px;
bottom: 0px;
overflow-y: auto;
}
I think the best way for android 2.2 browser implement javascript.
You can find more info via this link. It is about fixed positioning in all mobile browsers.
http://bradfrostweb.com/blog/mobile/fixed-position/
In his comment to Brad Frost's article Matthew Holloway suggests a solution along the lines of Anita Foley's answer, but with a polyfill for overflow:auto, where not supported. Check it out here:
http://bradfrostweb.com/blog/mobile/fixed-position/
It's not Samsung's Android broken browser, it's Android 2.2 which has the broken support.
In general as you might know position:fixed was and in some cases still is pretty broken in many mobile devices/systems.
To answer to your question, there is no "toggle or meta tag" that will "turn on the Android browser's working fixed-positioning". If a browser doesn't have support of something, then there's no "toggle" to "switch" it. It's not a feature.
Otherwise, you can use http://cubiq.org/iscroll-4 which emulates it.
(edit: some facts)
According to http://caniuse.com/#search=position:fixed Android 2.2 and Android 2.3 have PARTIAL and not full support of position:fixed. (partial support seems buggy support)
An Android simulator is not and will never be identical to an Android native browser, as much as IETester for example is not the same as IE native (there are differences)
Motorola ATRIX 4G does NOT have Android 2.2 but Android 2.3 ( http://www.motorola.com/us/consumers/MOTOROLA-ATRIX%E2%84%A2-4G/72112,en_US,pd.html?selectedTab=tab-2&cgid=mobile-phones#tab )
You are suggesting that SAMSUNG introduces a proprietary hack or mod that breaks the otherwise working support of position fixed in the Android browser. This seems highly unlikely, regardless of the 3 above points.
The answer is actually simple: There is partial (buggy) support and your only solution is to use a javascript library that replaces or "fixes" the hole.
I'm creating webview application in android using jquery mobile framework.
I need to show table that has width more than screen.
The horizontal scrollbar is not showing.
I have tried many ways but none worked for me.. (a lot of people facing the same problem with me, i have tried all of google search result link in page 1 to 3, some link from stackoverflow too)
Any suggestion?
*sorry for my bad english..
I had a very similar problem, and I found a workaround (bug-fix?) for my situation via some experimentation.
In the JQuery Mobile CSS file ("jquery.mobile-1.1.0-rc.2.css" for me), I changed line 1119 from:
.ui-content { border-width: 0; overflow: visible; overflow-x: hidden; padding: 15px; }
to:
.ui-content { border-width: 0; overflow: visible; overflow-x: scroll; padding: 15px; }
This allowed my CSS (with absolute widths and coordinates) to be scrollable horizontally.
Once you modify your local copy of the JQuery Mobile CSS, don't forget to change the link in your html header.
Again, I'm not sure if the previous behavior was intentional or not. It may very well be inline with the design goals of the Jquery Mobile team. But this change worked for me. Hope it helps.
I suspect this is a bug that I found in this forum.
http://forum.jquery.com/topic/horizontal-scroll-views
But here they talk about some other alternative for this called swipe by which you can achive this
There are already some talk about this in site itself and you can refer it.
Swipe among activities in android
I am developing a mobile web based page that uses CSS transitions and 3D transformations. I have ran into a bug with Android 3.1 Webkit and I can't seem to find a solution to it.
I use CSS rotations so that I basically have an element with the parameter backface-visibility: hidden; and then I add a class to this element to start the transformation.
#flipper {
-webkit-transform-origin: center center;
-webkit-transform-style: preserve-3d;
-webkit-transition: -webkit-transform 1s;
-webkit-backface-visibility: hidden;
}
.rotating-cover-effect {
-webkit-transform: rotateY(180deg);
}
The problem is that on Android (specifically 3.1) the backface of the #flipper is still visible after the rotation. On iOS or with desktop Webkit browsers (i.e Chrome, Safari) the background is hidden correctly.
Is this a bug in Android Webkit or am I doing something wrong?
Are you making an Android app? If so, you need to enable hardware acceleration by adding this to your AndroidManifest.xml:
<application android:hardwareAccelerated="true" ...>
If you're making an actual website, http://thewebrocks.com/demos/3D-css-tester/ can help you conclude whether it's a problem with what you're doing or with the browser implementation.