So here is an interesting situation I have come across.
You are on Chrome for android, when you scroll the body the address bar runs away and hides. Great!
Now you want to add a footer to your page that sticks to the bottom. You do the following:
html {
margin:0;
padding:0;
height:100%;
}
body {
margin:0;
padding:0;
height:100%;
}
#contentWrap {
margin:0;
padding:0;
padding-bottom:4em;
min-height:calc(100% - 4em);
position:relative;
}
#footer {
margin:0;
padding:0;
height:4em;
width:100%;
position:absolute;
bottom:0;
background:#262626;
}
<html>
<body>
<div id="contentWrap">
<div id="footer">
</div>
</div>
</body>
</html>
This works brilliantly, the footer will always stick to the bottom of the page regardless of content size or view-port scale.
However! Running this on a mobile design and testing in Chrome Android I found that setting the body to an explicit size, it will only scroll "content within" causing the address bar to stick around. Overflowing content is just set to default scroll in other words.
Noticing this I tried changing it to min-height so that it will always either be the size of the view-port if no content is available to fill it, or change height if there happens to be many lines of content.
Doing this however causes the contentWrap to base its height on the content rather than the parent element ie. <body>. So your footer now floats instead of sticking to the bottom.
I have played around with many combinations and cant seem to get what I want. Seems you have to live with either a sticky address bar OR a floating footer.
Please any ideas or thoughts on this would be appreciated.
Thanks but no that does not work in this situation.
Earlier today though whilst working on another project it hit me like a wet fish.
Remove dimensions from <html>.
Then add 100vh to your <body> instead of 100%
(making sure to only target mobile devices and not desktops)
Then it works perfectly! xD
Though Chrome is awesome imo. The little address hide on scroll has given me numerous headaches over the past few months.
When i make footers,
I code in css
.footerdiv{position:fixed; left:0; right:0; bottom:0; height:60px; z-index:777}
That does the trick.
Z-index keeps it above all the other elements. Position:fixed keeps it from moving as you scroll. and the left,right,bottom keep it sized perfectly.
Style as you wish.
Hope this helps.
Related
This code works exactly as expected in every desktop browser (Chrome, Edge, Firefox, Safari) and also in Firefox on Android. I don't have an iOS device to test with - I'd be curious to know what happens on an iPhone.
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Background</title>
<style>
html {
height:100%;
background:linear-gradient(red, blue) no-repeat fixed;
}
.wrapper {
min-width:590px;
padding:20px;
}
.box {
height:250px;
width:550px;
background-color:green;
}
</style>
</head>
<body>
<div class='wrapper'><div class='box'></div></div>
<div class='wrapper'><div class='box'></div></div>
<div class='wrapper'><div class='box'></div></div>
</body>
</html>
Live demo: https://misterneutron.com/lgtest/
The "no-repeat" attribute isn't even necessary, but just makes this demo even more clear. In short, it provides a red-to-blue linear gradient background that fills the viewport, and stays put if you have to scroll vertically or horizontally to see all of the green boxes. Firefox on Android flickers a bit, but gets the correct result. But in Chrome on Android, the background linear gradient scrolls with the content, leaving a white background. Without the "no-repeat" attribute, it actually repeats the background, apparently ignoring the "fixed" attribute.
Not surprisingly, the same thing happens with a background image (https://misterneutron.com/bgtest/). Same page code, but replace the html styling with:
html {
height:100%;
background: url('aspectWide.jpg') no-repeat fixed center center;
background-size: cover;
}
I've tried all types of alternates - 100-percenting things like height and width on html and body, putting the background on the body rather than the html, and so on. Nothing seems to change the behavior. Does anyone know how to beat this browser bug, or do I just have to wait for some future release? I could do some browser-sniffing and eliminate the background if it's Chrome on Android, but ugh.
There are threads about similar issues, but most are several years old, and address much older browser versions. And not one of the suggested workarounds has succeeded.
Edit: Another data point. The problem is much less severe with a repeating background: https://misterneutron.com/bgtest2/. But the "fixed" attribute is still being ignored. Much easier to live with than the original problem, however!
I am making a web app that is adapted/responsive to mobile. I have a toolbar that is positioned on the right side of the screen on my computer browser, and it is supposed to be placed fixed at the bottom of the screen on mobile. The strange thing is, when it is opened using an iPhone, the toolbar appears properly fixed at the bottom, but when I open the app on an Android device, such as my Samsung Galaxy S5, the toolbar is not appearing at all. Doing some testing, when I changed my styling to be relative instead of fixed, the toolbar is displayed in the same position in the middle of the screen on both iPhone and Android. What do you think the issue may be?
Here is the code:
<div class="col-sm-2">
<div class="sidebar-nav-right">
<div class="navbar navbar-default navbar-style" role="navigation">
<div class="nav">';
<a class="brand font-26 block brand-color">Tools</a>
<ul class="nav navbar-nav center">
<li><a data-toggle="modal" data-target="#newgroup-modal" class = "font-16">Create Group</a></li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
</div>
</div>
.sidebar-nav-right{
width: 100%;
position: fixed;
bottom: 0px;
border-top: 1px solid black;
}
This styling is inside a media query for smaller screen sizes and, as stated above, is adapting on a mobile device of one brand so I know there isn't a problem with the media query.
If add {left: 0} can't solve it, I guess maybe the parent node of .sidebar-nav-right have the transform; then the position origin has been reset.
this is a common problem on older Android browsers. Simply add -webkit-backface-visibility: hidden; to the fixed element.
There are two ways to fix this. See this article by Brad Frost for a list of Javascript solutions: http://bradfrost.com/blog/mobile/fixed-position/
Or try the above mentioned fix by Ben Frain: https://benfrain.com/easy-css-fix-fixed-positioning-android-2-2-2-3/
See this CodePen by Ben Frain as well: http://codepen.io/benfrain/full/wckpb
I think #GoreWang's comment is spot on. You should try the following 2 things:
(1) With fixed position, sometimes not having a left property set causes the fixed element to not appear when the page loaded. Try adding the following:
.sidebar-nav-right {
left: 0;
}
(2) Add following code to your fixed element:
.sidebar-nav-right {
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
This forces Chrome to use hardware acceleration to continuously paint the fixed element and avoid this bizarre behavior.(Known bug)
No one ever quite answered this similar question,
Blurry images on stock android browser
So I'm going to post my own version specific to my situation.
The problem is that position:fixed causes child image elements to be blurry in some android browsers. In my case, it causes the stock browser of Galaxy Note v1 running Android 4.0 to experience this issue. Others have said the same thing for some Galaxy S3. Here's my code:
Preview # http://jl.evermight.net/blurryposition/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, maximum-scale=1.0,initial-scale=1.0, user-scalable=no" />
</head>
<body>
<div id="top-nav-container"
style="
display:block;
top:0px;
position:fixed;
width:100%; height:5.2rem;
">
<a style="background-image:url(logotest_big.jpg);
background-size:20%;
display:block;
width:500px;
height:200px;
"></a>
</div>
</body>
</html>
You'll notice that the OPTIX Testing logo is blurry at first. If you remove position:fixed from the #top-nav-container, then the logo is crisp and clear. So my question is, how do I keep both position:fixed and a crisp logo?
In my real website, the top navigation is supposed to stay fixed while you scroll through the site. I tried using position:absolute and using javascript to reposition the top navigation on scroll, but that caused a whole bunch of jumping/flickering effects. So if I can't use position:fixed or position:absolute to fix the top navigation to the top of a mobile web browser, what are my other options? How do other mobile websites achieve this result?
Additional Info:
I did some more experiments with the resizing image, changing view port, and changing the position:fixed/absolute and came to some interesting results. See below:
position:fixed no-background-size with-viewport - fuzzy
position:fixed no-background-size without-viewport - crisp
position:fixed background-size:20% with-viewport - fuzzy
position:fixed background-size:20% without-viewport - fuzzy
position:absolute no-background-size with-viewport - fuzzy
position:absolute no-background-size without-viewport - crisp
position:absolute background-size:20% with-viewport - crisp
position:absolute background-size:20% without-viewport - crisp
Here's how to read this chart:
first column states whether #top-nav-container is using position:fixed or position:absolute
second column states if i used background-size:20% or if i omitted it
third column states whether i included the <meta viewport> tag in the head
fourth column states whether the optix testing logo is fuzzy or crisp.
Looking at the results, you can see that the only time you get a crisp image with a container that has position:fixed is when an image has not been stretched or compressed via background-size or or with the view port. Also, the only time you get a fuzzy image with a container that has position:absolute is when an image has been stretched with background-size and with a viewport.
Using position: fixed is still a bad idea on mobile devices. The overwhelming majority of websites fall back to a static header for mobile views (ie. no floating navbar).
I experienced similar issues recently, as illustrated in this question.
A few resources for you:
Read this article on Quirksmode to learn about the problem: http://www.quirksmode.org/blog/archives/2010/12/the_fifth_posit.html
See which mobile browsers support position: fixed in this table: http://caniuse.com/#search=fixed
add inside top-nav-container.
<div id="top-nav-container"
style="
display:block;
top:0px;
position:fixed;
width:100%; height:5.2rem;
">
<a style="background-image:url(logotest_big.jpg);
background-size:20%;
display:block;
width:500px;
height:200px;
"></a>
</div>
I got this problem too when creating fixed action bar with div using background-image as icon. But when I add Text in that action bar, that background-image become crisp. So I just add as replacement for Text if I don't want any Text on my action bar.
Sorry for my bad English :D
Instead of user-scalable=no change it to user-scalable=0
try this:
img {
transform: scale(1) rotate(0) translate3d(0,0,0);
}
<div style="position:fixed;"><img/></div>
<div style="position:fixed;"></div><!--add it-->
add a "fixed" element follow the "fixed", just like up.
I have a toolbar at the bottom of my mobile webapp. I'd like to be able to drag this toolbar up and down, revealing content underneath it. I'd like to be able to do this simply by using HTML/CSS, and not having to use touch/scroll events or mobile touch/scroll libraries.
I am trying to do this by overlaying a scrolling element on top of the main webapp with the toolbar and its content at the bottom. I've given this element a lower z-index than the main content so that it doesn't block the user from interacting with the main content, and given the toolbar and its content a higher z-index so that it can be seen and pulled/scrolled up.
I have created a jsFiddle that has the correct behaviour in both desktop and Android versions of Chrome. I can drag up the toolbar with my finger or by scrolling with my cursor on top of it:
Unfortunately, the toolbar does not appear in the Android browser (tested on 4.1 and 4.2).
However when I press where the toolbar should be and drag up, it doesn't scroll the page until I have moved my finger far enough to have scrolled the toolbar all the way up, if it were visible. This is how scrolling the toolbar works in Chrome, and indicates that the toolbar is scrolling properly in the Android browser. It just isn't visible.
<div id="main-content"></div>
<div id="scroller">
<div id="wrapper">
<div id="toolbar-and-content">
<div id="toolbar">Toolbar</div>
<div id="toolbar-content">Toolbar content</div>
</div>
</div>
</div>
#main-content {
position:relative;
width:100%;
height:300px;
background-color:green;
z-index:1;
}
#scroller {
position:absolute;
top:0;
width:100%;
height:300px;
overflow:auto;
}
#wrapper {
position:relative;
width:100%;
height:500px;
}
#toolbar-and-content {
position:absolute;
bottom:0;
width:100%;
height:250px;
z-index:2;
}
#toolbar {
width:100%;
height:49px;
border-bottom:1px solid black;
background-color:red;
}
#toolbar-content {
width:100%;
height:200px;
background-color:orange;
}
I figure it doesn't work on the Android browser because it is deciding to ignore the toolbar's higher z-index, since it's in an element with a lower z-index.
Either way, does anyone know how I might be able to change this so that it would work on the Android browser, and/or are there other layout schemes I can use to achieve what I desire through only HTML/CSS?
I tested your example in Emulator, try add:
z-index: 2;
to your #scroller:
#scroller {
position:absolute;
top:0;
width:100%;
height:300px;
overflow:auto;
z-index: 2; // NEW
}
Worked fine for me
Why do you need z-index on #main-content? If you could just skip it than it would work even without additional z-index on #scroller.
The code below is not working in Android browser!
How do I fix it?
<input id="sannn" type="button" value="SAN" />
<div id="sann" style="width:640px; height:200px; overflow:scroll; border:solid 1px red;">
<div style="border:solid 1px green; width:3000px; height:200px;">4545</div>
</div>
$('#sannn').bind('click', function () {
$('#sann').scrollLeft(10);
});
Looks like it is a bug in Android Browsers 4.0.3+
http://code.google.com/p/android/issues/detail?id=38505&thanks=38505&ts=1350315570
Issue 38505: DOM element scrollLeft setter doesn't work in Android Browser 4.0.3+
Position the div wrapper as relative with overflow hidden and a specific width and height. Use position absolute on the inner div (the div you want to move) and play with the inline style left position via jQuery.
If you really need scrollbars. The Jquery UI sliders might help: http://jqueryui.com/slider/
I ran into the same issue with Zepto.js. I was able to work around this issue by first disabling the overflow: scroll on the scrolling element, like so:
$("#element-to-scroll").css({'overflow': 'hidden'}).scrollLeftTo(newXPos, 250).css({'overflow': 'scroll');