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
Related
The easiest and most compatible way I know to stretch a static background image and cover the entire screen is:
html { min-height: 100%; }
body
{
background: url('https://i.imgur.com/YSRXO72.jpg') no-repeat center fixed;
background-size: cover;
}
The html { min-height: 100%; } is just in case there is only little content in the html body, this makes sure the background is still stretched over the entire screen.
This works perfectly fine in almost any situation, however if there is more content in the page than fits on the screen, Chrome on Android seems to stretch the background image to cover the entire page rather than the screen.
Live example: https://jsfiddle.net/7cnuytk2/
(note that I also put the -webkit -moz and -o background size settings there for compatibility, but it also works without)
I deliberately took a test background image here with N/E/S/W markers, you should always see 'center' in the center and either the top+bottom or left+right edges.
The background is properly stretched in all cases, except Chrome on Android which stretches it too much. If there is less content in the html part, e.g. just one <h1>test</h1> or something, it works fine on Chrome as well.
Any ideas? Is this a bug in Chrome? Can I work around this without falling back to all sorts of dirty javascript hackery?
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 trying to fit a background image to it's container using background-size:cover.
here is my fiddle : The Fiddle
it works in all browsers but not working in Android native browser..
anybody has any solution please ? thanks
After searching about this problem and finding no solution, I deleted background-image from CSS file styles and used an inline style in HTML codes. The problem with android native browser is solved.
I updated the fiddle and it's working in android native browser.
The Updated Fiddle
it seems that android also has problem with parsing background format like this :
background: url('...') fixed center center / cover;
and we should separate the background-image form others and use it inline, and then use each option separately in css file, like this :
background-size: cover;
background-position: center center;
Unfortunately, the background-size property isn't fully supported by older versions of Android's native browser and Chrome for Android. I went through the pain of discovering this the hard way. Instead of using "cover" as a value, do the following:
background-size: 100% auto;
What this does is give you the same horizontal feel as "cover" and then automatically sets the height of the image, assuming that the image has intrinsic dimensions.
For further reading, I recommend diving into the detailed writeup from Sara Soueidan.
I had the same problem with background-size: cover, the image was fit to the width of the device and below there was white background, and it was fixed when I set background-color using this css:
background-color: #fff;
or shorthand:
background: #fff url('http://cdn.stupiddope.com/wp-content/uploads/2013/06/IMGP3540.jpg') no-repeat scroll center center / cover;
it doesn't matter which color you pick because it will be invisible.
JSFIDDLE
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.