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.
Related
I have an issue about the phone view of a website that I have created. On classical desktop browsers (tested with Chrome, Firefox), I added for get responsive behavior :
<meta name="viewport" content="width=device-width, initial-scale=1">
Unfortunately, unlike the classical view, the view on Android browsers (Tested also with Chrome and Firefox android), I have an extra horizontal grey bar which appears on the top-right of page (above main menu "sciences-coding" and I don't know where this bar comes from ?
Here the [link][2] where you can see better the issue on your android and compare it to desktop browser : maybe someone will find the origin of this bar on Android (I don't know if this is also the case on iPhone).
This issue is not related to Android or iOS. It happens in all devices since it’s a layout issue. I see this bar on my MacBook Pro using Firefox, for example:
However, it seems a scrollbar, but it isn’t. It’s generated by this HTML element:
<div class="horizontal_column">
to which these CSS rules are applied:
border-color: #000000;
border-style: solid;
border-width: 15px 0 0 0;
As you can see by changing these rules, the “fake scrollbar” change.
I was playing around with a site that shows an ASCII/ANSI art logo and everything seems to work great in desktop browsers.
Then I wanted to see if it works on mobile devices but here it seems like the whitespaces are of a wrong width.
The part of the website showing the ASCII-art is wrapped in a <div> with following CSS properties:
line-height:1em;
color: #ff791a;
white-space: pre !important;
font-size: 0.7vw;
margin: 20% 50% 0 0;
font-family: 'Druid San Mono',courier, monospace, monospace;
width: 100%;
height: 100px;
I have tried with several variations of fonts like "Druid Sans Mono", monospace (also the monospace, monospace hack), "Courier" and "Roboto Mono" but none of them worked.
I also tried using nbsp instead of just spaces.
changing letter-spacing also did not seem to have the effect I wanted.
Is there any trick to get this to work ?
you can see the site here disconnected.tech
Turns out some gliphs are missing in Google fonts.
A workaround is Adobe's Source Code Pro, which has all characters (including box drawing, which is what I needed). Mononoki should also work.
I include straight from Adobe, not via Google Fonts: https://adobe-fonts.github.io/source-code-pro/source-code-pro.css
It may be possible to tell Google Fonts to include all necessary characters in their reduced Source Code Pro (text= parameter).
I have a fixed footer with bottom: 0. It works fine except on android it is appearing below the screen. I have some other fixed elements that are also appearing off screen. For some reason I cant container them within the screen I've searched around and tried a view things but no joy. My guess is that if I change something in the viewport it will fix it. The image was taken from google chrome emulating the site on an S4 but the same problem persists on my actual phone also. The code for the footer should just make it sit at the bottom and it works fine in other browsers. I can change the value of bottom to around 26px then the whole footer becomes visible on the screen but that is not the fix I want. Any ideas?
.footer-fixed{
position: fixed;
bottom: 0;
z-index: 99;
width:100%;
background-color: #111;
height: 50px;
}
i've had this issue before,
but only on android versions lower then 4.4, so maybe you could tell me what android version you are working on,
try adding:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=yes"/>
to your
<head></head>
on Android < 2.3 devices for elements that are fixed behave as "STATIC", (thats why your top element could be functioning normally, because its the first element and pushes the rest down)
Android 2.3 supports it but u need to disable viewport scaling as i think once written by bradfrost cant exactly remember, it was a while ago
if you experience flickering of the elment try adding
-webkit-backface-visibility: hidden;
to your css class, or even extend it with
-webkit-transform: translate3d(0,0,0); makes some devices run their hardware acceleration.
-webkit-perspective: 1000;
its solves the flickering, but the thing is on some android versions you only need to add the backface-visibility hidden and on some the other 2 rules (trial and error). i should go for the first one, (at first) because adding the translate 3d, will drain more battery
anyways if its just a website try the solution above,
if you are making a cordova app, try adding https://crosswalk-project.org/ which add their own webview to your cordova package solving all these browser quirks on android.
--
a sidenote
when a element has position fixed, its display will be set to block,
and you have width: 100% on your elment, so if you are not using box-sizing:border-box;
the element would have a width of 100% + padding + margin added to it,
i don't know the rest of your css, maybe you are setting margin or padding by a container class which is
(check the metrics of your element with chrome inspector)
If this is the case you could do 2 things
change display
width: 100% to auto;
or add: http://www.paulirish.com/2012/box-sizing-border-box-ftw/
box-sizing: -webkit-box-sizing: border-box;
or add normalize: https://necolas.github.io/normalize.css/ to your project, above your own css (link tag) within the head (Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.)
I wish to have a DIV element show up on my website only if the user is on a mobile device. This is for a small business website and I want to have a link that allows the end user to call the business direct from the web page - I don't need this DIV element to appear on the desktop version of the website.
I have achieved this using the following code:
#callus {display:none}
#media screen and (max-width: 900px) {
#callus { display:inline !important; }
}
.callnow {
position: fixed;
bottom: 0px;
left: 0px;
height: 100px;
width: 960px;
background-color: #f90;
}
However, upon testing, I have realised that modern mobile devices often have high resolutions that are in some cases equal to what might be considered a "normal" desktop resolution, therefore I am looking for a solution that simply looks for something like "If OS is Windows Phone, iOS or Android then show this element".
Is this possible?
You can detect for different features using modernizr http://modernizr.com/ for example detecting touch is useful, but it requires Javascript support.
Mobile devices despite having high resolution screens should still work with media queries. Make sure to have the below code in your header
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
this sets mobile devices to render the site correctly despite HiDPI
It's not possible with pure CSS Media Queries however you can add queries to address specific device - look here.
You can detect mobile browser (User Agent) with JavaScript and add some class to body - e.g. mobile-device and then in CSS .mobile-device #callus { display: inline; }. I found great solution here: https://stackoverflow.com/a/11381730/3589528
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