It seems that the background-fixed CSS property doesn't work right in Jelly Bean WebView (both inside an application and using the default Android browser).
If I set this property, the background image gets loaded over the content, i.e. the content is behind the background image.
Here's my relevant HTML code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="target-densitydpi=device-dpi">
<meta name="viewport" content="initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./gesture-background_files/genre-channel-background.css">
<style type="text/css"></style></head>
<body>
<div id="right-keys">
<img src="./gesture-background_files/one.png"><br />
Film24<br />
</div>
<div id="right-keys-vertical">
<img src="./gesture-background_files/one.png"><br />
Film24<br />
</div>
<div id="footer">
MUSCADE<span class="large">EPG</span>
</div>
</body>
</html>
And here's the relevant part of the CSS:
body {
background-image: url(hot-black-background.jpg);
background-color: black;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom left;
}
#right-keys, #right-keys-vertical {
position: absolute;
right: 10px;
width: 100px;
text-align: center;
text-shadow: black 2px 2px 0px;
}
#right-keys img, #right-keys-vertical img {
height: 90px;
margin-bottom: 0;
}
#footer {
position: absolute;
right: 10px;
bottom: 10px;
font-size: 20px;
}
It's a bit long, but the only important part are the background-attachment and background-position properties on top of the CSS file. If I remove those, everything works fine.
Is this a known bug? Can anyone suggest a workaround?
Here's a link to the file so you can try opening it from a Jelly Bean native browser (not Chrome):
http://212.92.197.78/gesture/gesture-background.htm
It turns out that in the Jelly Bean browser if you use
body {
background-image: url(any-image.jpg);
background-attachment: fixed;
background-position: bottom;
}
or anything involving bottom or right for background-position, any elements you position with reference to the right or bottom edge of the screen will be overlaid by the background image.
This is most certainly a bug in Jelly Bean's browser.
Instead of using the above, I put a background image on my page using the following code:
HTML:
<body>
<img id="background" src="any-image.jpg" />
(...)
</body>
CSS:
#background {
z-index: -1;
position: fixed;
bottom: 0;
left: 0;
}
for position related and absolute you can use z-index. Read more about z-index: http://www.w3schools.com/cssref/pr_pos_z-index.asp
On my website, to make the background image to reappear behind the content (on Jelly Bean browser), I only had to remove the css property: background-attachment: fixed.
Zoltan's solution not worked well to me because it makes the background image does not display correctly in some browsers (tested on browserstack)
Related
I'm experiencing a strange problem on the stock browser on an HTC One X running Android 4.2.2.
I have a container div with overflow-x set to hidden and overflow-y set to auto, it has fixed width and height dimensions. The child content has width and height that exceeds its parent. The idea is that you should be able to scroll vertically but not horizontally. Every browser that i've seen behaves correctly and I get the desired effect. However, on this Android Stock browser I am able to scroll horizontally AND vertically freely, which is not what I want as the overflow-x: hidden is supposed to prevent horizontal scrolling.
I've created a codepen to demo the basic problem:
http://codepen.io/anon/pen/YXjZKR
Code here too:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1' />
<style>
.container{
width: 300px;
height: 500px;
overflow-x: hidden;
overflow-y: auto;
}
ul.pages {
position: relative;
margin: 0;
padding: 0;
white-space: nowrap;
}
li {
width: 300px;
line-height: 500px;
display: inline-block;
margin: 0;
padding: 0;
vertical-align: top;
text-align: left;
white-space: normal;
height: auto;
}
li.one {
background-color: red;
}
li.two {
background-color: yellow;
}
li.three {
background-color: green;
}
</style>
</head>
<body>
<div class="container" id="container">
<ul class="pages">
<li class="one">Hello<br /><br /></li>
<li class="two">good</li>
<li class="three">bye</li>
</ul>
</div>
</body>
I have also noticed that if I shorten the height of the child content to be less than the container, then the content no longer scrolls horizontally either. Unfortunately the content will always be taller than the container.
Have spent hours trying to work out why this is happening and, more importantly, looking for a workaround but have had no luck so far.
Any help would be really appreciated.
Thanks
I'm assuming that the <li> elements are set to display: inline-block in order to hide them horizontally. If so, your issue is that the .container element is not the parent of the <li>.
The actual parent - the ul.pages - is defaulting to overflow: auto in this browser for some reason. Set that to overflow-x: hidden and you should be alright.
As the title says. I can't get the scale3d tranform to work on Android 4.4.2 (webview). Tested on a real device and in an emulator.
However on a S3 Mini with Android 4.2.2 it runs as expected. Also according to the website http://caniuse.com/#feat=transforms3d 3d transforms should work on Android 4.4.2.
Here is some code I used for testing (fiddle link here). The blue box should be four times bigger than the red one:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.yoyo{
position: absolute;
display: inline-block;
width: 20px;
height: 20px;
background-color: red;
}
.yoyo.blue{
background-color: blue;
right: 0;
transform: scale3d(4,4,1);
-webkit-transform: scale3d(4,4,1);
}
</style>
</head>
<body>
<div class="yoyo"></div>
<div class="yoyo blue"></div>
</body>
</html>
I'm trying to show a background image on an Android phonegap app using css. This is the sample HTML
<html>
<head>
<title>Login page</title>
</head>
<body style="margin: 0px; background: url("img/bg_index.jpg";) repeat scroll 50% 0px / cover transparent;">
</body>
</html>
while using this code the background image is not shown in certain android phones such as sony ericsion but in most of the android phones and also in iphone this code is working fine.
So I tried to change style as shown below
<html>
<head>
<title>Login page</title>
</head>
<body style="margin: 0px;background: url("img/bg_index.jpg";) repeat scroll 50% 0px / cover transparent; background-image: url("img/bg_index.jpg";);background-repeat:no-repeat;">
</body>
</html>
After this style applied the app launched as below in the image
How to write a background style that is accepted by all android devices and iphone
Try this:
background: url("../img/bg_index.jpg");
Simply do this:
background: url("your/path/img/bg_index.jpg");
div {
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-size:100% 100%;
}
#first-bg {
background-image: url('http://go.sap.com/_jcr_content/par/hero_a9cf/image.adapt.subtablet.jpg/1426599556769.jpg');
background-size: 100%;
height: 600px;
background-repeat: no-repeat;
}
A simple HTML page contains a div with overflow-y:auto inside of another div with overflow-y:auto. This page scrolls normally on touch devices with IOS Safari and Android Chrome browsers.
However, if I open the same page in a native Android v.4.0 to 4.3 browser and scroll the outer div, the inner div does not move synchronously with the remaining content and jumps to its place only after some delay.
The same happens if the internal div has overflow-x: auto.
Example page: http://jsbin.com/cojoluwo/1/
The code looks as follows:
<!DOCTYPE html>
<html><head>
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<title>test</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#content {
height: 100%;
overflow-y: auto;
}
#scroller{
height: 100px;
overflow-y: auto;
width: 200px;
border: 1px solid red;
}
</style>
</head>
<body class='sapUiBody'>
<div id='content'>
<div>
<p> some text
......
<p> some text
<div id=scroller>
<p>internal text
...........
<p>internal text
</div>
<p> some text
...........
<p> some text
</div>
</div>
</body>
</html>
Is it a bug? If yes, is there any workaround known?
there's no need for this:
#content {
height: 100%;
overflow-y: auto;
}
a scrollable div with a set overflow inside another scrollable div with a set overflow is not a good idea on mobile and since your css properties for #content are redundant and not useful, you can safely remove them and it will work
http://jsbin.com/cojoluwo/5
Given a simple page (source below) that contains an element with a 1px border, it will render like this on Android compared to iOS:
As you can see, the Android border does not have a uniform width, sometimes being 1px and sometimes being 2px wide. As far as I've been able to test it, this only occurs on devices with a CSS pixel ratio of 1.5 (including the Android emulator), but not with a pixel ratio of 2 (including iOS). I believe that this problem is caused by subpixel-antialias and/or rounding issues, but I honestly have no idea how I'd go about fixing this.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<style type="text/css">
div {
width: 100px;
text-align: center;
margin-left: 50%;
border: 1px solid magenta;
}
</style>
</head>
<body>
<div>Foobar</div>
</body>
</html>
For low DPI devices I found next workaround:
.wrapper {
background-color: red;
padding: 1px;
display: inline-block;
}
.inner_text {
padding: 5px;
background-color: #fff;
display: inline-block;
}
<div class="wrapper">
<span class="inner_text">Showing perfect one-sized border on low DPI devices</span>
</div>
for exactly low dpi devices should use media query for exceptions.
For example #media (max-resolution: 190dpi) or another condition
It looks little different from border 1px but so close and not bugged with random width