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>
Related
I am using sticky footer design for my website that I have adopted from Responsive Web Design with HTML5 and CSS3 (second edition) from Ben Frain. It is working perfectly on major modern browsers but not on Samsung Galaxi Note 2 built-in browser. I am wondering why? .Any explanation or advice is welcome, including any feedback from iphone users.
<!doctype html>
<html>
<head>
<meta charset="iso-8859-1">
<title>Sticky footer</title>
</head>
<style type="text/css">
html, body{
margin: 0;
padding:0;
}
html{
height: 100%;
}
body{
display: flex;
flex-direction: column;
min-height: 100%;
}
#header{
background-color: #0FF;
}
#MainContent{
flex: 1;
}
#footer{
background-color: #0F9;
}
</style>
<body>
<div id="header">This is the header</div>
<div id="MainContent">This is the main content</div>
<div id="footer">This is the footer</div>
</body>
</html>
Samsung Galaxi Note 2, in-built browser, does not handle html5 flexbox concept properly even by putting -webkit. Use Chrome or FireFox instead.
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;
}
I have a scrollLeft function on a header so it is fixed vertically but scrolls horizontally. There is a bug in chrome for android where the header scrolls horizontally twice as fast as the rest of the page.
If I view this example in chrome for android it works as it should.
jsfiddle demo
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'>
</script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
#header {
height: 40px;
width: 900px;
background-color: red;
position: fixed;
z-index: 2; }
#content {
height: 1000px;
width: 900px;
background-color: blue;
top: 50px;
position: absolute;
z-index: 1; }
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(window).scroll(function(){
$('#header').css('left', 8 - $(this).scrollLeft());
});
});//]]>
</script>
</head>
<body>
<div id="header">This is a fixed header that scrolls horizontally</div>
<div id="content">This is blah blah blah blah</div>
</body>
</html>
When I implement the code on a basic page as this page, the bug appears.
simple jsfiddle page
Somehow jsfiddle gets around the bug.
Changing
$('#header').css('left', 8 - $(this).scrollLeft());
to
$('#header').css('margin-left', 8 - $(this).scrollLeft());
and setting the fixed element to left:auto !important;
has resolved the issue!!!
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
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)