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.
Related
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.
I'm developing a personal website, and I'm having some issues with Chrome on Android.
I have a background image covering up all the page, and it works fine in every browser I own (Chrome, Opera, Safari, Firefox) and on every mobile browser I own (Chrome on iOS, Safari on iOS, even default Android browser).
Here's the CSS for my body:
body {
width: 100%;
height: 100%;
background: url(../images/background.jpg) no-repeat center center fixed;
background-size: cover;
}
What happens on Chrome for Android is that the background covers only the available viewport (above the fold), while disappearing below the fold.
Here's a screenshot:
Could it be a problem with using body instead of the more classic wrapper #container div? I would really like to resolve this without having to clutter my markup; I'm confident it's something possible since it works in really most browsers.
Maybe it's a Chrome for Android bug?
As suggested in the comments, the problem was explicitly setting height: 100% on the body, which made it stick to the viewport height.
By removing that constraint, now the background extends to all the content.
Switching to min-height: 100% for body and html should give you the same affect.
Otherwise could you provide an example URL or code example of jsbin.com
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
Can you make the overflow content of a div scrollable in the Android browser?
It is scrollable in all other modern browsers.
In iOS it is scrollable - however it does not show scrollbars - but it is scrollable via dragging.
A simple example:
http://jsfiddle.net/KPuW5/1/embedded/result/
Will this be fixed soon?
Android 3.0 and higher have support for overflow:scroll, on < 3.0 it's another story. You might have some success with polyfills like iScroll, however that does come at a cost. It's difficult to implement on sites with complex layouts, and you need to a call a method everytime the content on your site changes. Memory use is also an issue: on already underpowered devices performance may lag because of these kinds of polyfills.
I would recommend a different approach: use Modernizr to detect support for overflow scrolling , add a class to your html tag and use that to rewrite your CSS so that pages scroll 'normally' instead of in a box.
/* For browsers that support overflow scrolling */
#div {
height: 400px;
overflow: auto;
}
/* And for browsers that don't */
html.no-overflowscrolling #div {
height: auto;
}
overflow: scroll; is supported as of Android 3 (API 11).
For a cross-platform (namely iOS <=4.3.2) Cubiq iScroll is an easy-to-implement fix.
You could try touchscoll.js for scrollable div elements
Just for completeness:
The scrollbars are actually there in Android 2.3, but they are very buggy and by default they are styled to have 0 width, so they are invisible.
You can make them visible by adding styling like:
::-webkit-scrollbar {
width: 30px;
}
::-webkit-scrollbar-track {
background-color: $lightestgrey;
}
::-webkit-scrollbar-thumb {
background-color: $lightgrey;
}
However, the thumb element is not draggable, you can only move it by tapping the track underneath or above it.
Also, these styles will change the look of your scrollbars in all webkit browsers, so best you should add a class that only applies to Android 2.3.
You can make a DIV scrollable in Android by defining the styles of the scrollbar in your CSS.
This article show you how to do it:
http://css-tricks.com/custom-scrollbars-in-webkit/