Develop Reference

Mozilla Android AddressBar Conflict with Sticky Button on Bottom

I have searched a lot and havent found any solution that works so here it is.
I have created a button that is after the content and have applied css for it to become sticky at the bottom of the page...
<button class="ocs-trigger ocs-toggle ocs-toggle-posts-toc-mobile">Περιεχόμενα</button>
button.ocs-toggle-posts-toc-mobile {
display: block;
bottom: 10px;
position: sticky;
position: -webkit-sticky;
margin: auto;
border-radius: 4px;
box-shadow: 0 0 3px 0 #d5d5d5;
background: #232f3e;
font-weight: 500;
font-size: 18px;
padding: 7px 12px;
}
It works everywhere in any browser i tested except mozilla android.
If mozilla bottom adressbar is visible the button works okay.
https://imgur.com/a/EJosALR
BUT if mozilla’s bottom address bar is hidden, the button isnt clickable.
https://imgur.com/a/A2jwzIl
When the mozilla’s bottom address bar is hidden i think the viewport height changes, and maybe because the button is now where the visible adressbar was maybe it out of the "active" viewport of mozilla... that's definetely a bug i believe cause it doesnt happen in other browsers!
Nevertheless can you take a look and see if i have anything i have missed?
I would really appreciate it cause i have looked almost everywhere i believe...
test url: https://thefinterest.kinsta.cloud/p/asjalska/

Investigations using Firefox remote debugging
TL;DR: With high probability a bug in the Firefox mobile app
So I've linked up my phone to the computer and started a remote debugging session on the page you provided.
When inspecting the button element <button class="ocs-trigger ocs-toggle ocs-toggle-posts-toc-mobile">Περιεχόμενα</button> we can see the exact box position highlighted in the viewport: screenshot
And now it gets interesting. Apparently, the DOM box of the element gets shifted as soon as the bottom bar disappears. Or rather: The initial viewport (when the bottom bar is visible) doesn't change, because the box is still located at the same position.
So you can in fact still click/touch the button but in an area above it.
You can see this behavior in the screen recording below:
Cookie banner is repositioned as expected
Interestingly, the behavior of the cookie banner (hidden in the screen recording because already confirmed) looks as expected though. So what's the difference to the button?
Workaround and working solution: move the button above the #ocs-site element
Apparently, after quite a lot of experiments, I realized the only difference between the button (incorrect behavior) and cookie banner (correct behavior) is the fact, that the cookie banner is in a rather top level of the DOM, whereas the button is nested quite deep in the tree.
Finally, I could find a working solution that makes the button behave as expected. Here you can see the correct scrolling behavior:
The solution I've come up with is to move the .ocs-trigger button above the #ocs-site div element. This fixes the incorrect scrolling behavior when the bottom bar disappears/appears.
Also, apply some styles on the .ocs-trigger element for the correct positioning.
position: fixed;
bottom: 10px;
z-index: 11;
left: 0;
right: 0;
Here you see the final DOM in a screenshot:
Please note, that you probably have to apply additional styling changes. This solution's major aspect was to get rid of the incorrect scrolling behavior.
Follow-up: Firefox Bug? Seems to me.
As it still appears to me at this moment, I would say this is a bug in the mobile Firefox implementation. My guess is, that the viewport calculations are somehow incorrect for nested elements.
In order to get some attention on this topic, I would recommend you to share these investigations and documentation with the Mozilla team at https://github.com/mozilla-mobile/fenix/issues. Let me know if I can help you with this.

Fixed Element on Android going appearing offscreen

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.)

Android tablet browser select box height compatibility issue

Although my site isn't the best, it's a mash of HTML and isn't even responsive, it works as expected in every browser except for the Android Browser. I have a secreenshot below of the select box in the android browser, and then in every other browser. I'm really not sure how to approach this as I generally work things out in the end with trial and error, and like I said my code really isn't that good!
Any help would really be appreciated :) thanks very much.
Android (using www.modern.ie to test):
Other browsers:
The CSS for the select box:
#form .input-select {
background: url(../images/field-bg.png) repeat-x;
height: 30px;
width: 210px;
border: 1px solid #c2c2c2;
border-radius: .2em;
font-size: 14px;
padding: 5px;
-webkit-appearance:menulist;

Form elements are among the most unreliable parts of HTML/CSS regarding cross-browser rendering consistency. Especially some properties of the box model (height in conclusion with border or padding) are troublesome.
Citing from that article:
Developers tried to fix this problem by turning these elements [input, select] into block-level elements. [...] A common pattern to solve this problem is to avoid the height property and instead to use the font-size and padding properties.
A great CSS collection to start with is normalize.css. You should think about using (parts of) it, to get as much rendering consistency as possible.
You are already using em as unit for border-radius, for scalability in older browsers, especially IE 6-8, you could go for ems for all length units.
I've forked your fiddle, to include those ideas. See http://jsfiddle.net/Volker_E/4v3sm71g/
By the way, Chrome v36.0.x on Android 4.4 doesn't show a difference at all per default.

#form .input-select {
? float:right; ?
clear:right;
}
#form label {
? float:left; ?
clear:left;
}

How to make inline-block in Chrome for Android work properly?

I'm trying to set up a page that looks good in Chrome for Android as well as in desktop Chrome.
I've got it working well in desktop Chrome, as per this screen shot:
.
The two "Answer Choice" lines, including the red "X" buttons, are in a div (called answers). The green "+" button is in the layout after the answers div. I've applied display: inline-block to the answers div, and as you can see, it's working as expected.
However, when I try to do this in Chrome for Android, the inline-block style doesn't seem to be working properly:
I can confirm that the style is being applied (I can use the remote inspector). If I remove the style, the green "+" button moves up a few pixels, showing that it is doing something, just not what I want.
How can I force Chrome on Android to respect the inline-block style?
EDIT: Here's the CSS applicable to the div containing all the answer choices:
.answers {
display: inline-block;
margin-bottom: 5px
}

I had the same issue, and found the solution on another question about div's and inline-block style. It's because of the way white-space collapses in html. You need to change your html so that the first button's close tag has no space between the second button's open tag.
<button class="button1">1
</button><button class="button2">2
</button>
See inline-block elements are line breaking for seemingly no reason?

I've experienced inline-block behaving inconsistently on Android as well. While I haven't been able to track down exactly what's going on, in many cases you can get away with using display: inline, which renders consistently.
Of course, you cannot use margin on inline elements. To address the vertical positioning, you can use vertical-align: middle.

Try to add "!important" to the "display: inline-block;"-attribute. Then it should look like this:
display: inline-block !important;

Weird width of app window causing undesirable margin

So I'm making an app for android 2.1 using phonegap and there is some extra blank margin on the right side (about 5px) that makes the page horizontally scrollable (I really want to avoid that).
I went crazy changing and testing css until I tried to check widths with javascript.
(device is 320px wide)
main div is 320px, body is 320px and document is 320px... but window is 325px!
I'm blaming it all on this window weird width, but I don't really know what to do...
I guess this is some kind of bug (since everything runs fine on 2.2). But is there a workaround? Is someone experiencing this too? Thanks in advance!

It's hard without code, but I had the exact same problem and solved it with:
body {
margin: 0px;
}
Maybe padding too. Check your page in a browser like Chrome and check the metrics of the body or any other elements that might cause problems.

problem solved, although it doesn't make much sense...
my "main div" (which covers all the page) had this css rules:
.main-div{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
it seems that there is some kind of calculating issue with this positioning in android 2.1 that makes it larger than it is meant to be.
after changing the positioning from "absolute" to "fixed", it becomes fit with the screen, no right margin.
it may be a bad fix for one who needs to use the absolute positioning, but it's fine for my case.
i hope this helps someone someday ;)