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.
Related
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 am completely at a loss here, and because I don't have an Android device, it's been very hard to figure out what's going on, and can't duplicate it in the simulator. For reasons unknown, Chrome on Android is having issues focusing form fields, and users are starting to complain. Everything works fine on other platforms - including Chrome on Windows/Mac/iOS.
The site having the problems is no longer broken, as the problem was resolved.
Any guidance would be hugely appreciated.
I did some testing locally and confirmed that my comment is correct. If you set the vimeo iframe to display: none; that will allow the form elements to be tapped on android / chrome. So you'll need to make three changes:
css update: set vimeo iframe to display: none
javascript update - where you normally set vimeo's iframe to visibility:visible, you'll also have to set display:block
javascript update - similar to above, where you set vimeo's iframe to visibility:hidden, you'll also have to set display: none
I believe that will solve the problem and have no negative side effects.
Vimeo iframe is taking the focus, hence the input fields are not clickable.
Set the width and padding-top to the modal containing Vimeo iframe only when the modal is selected.
Change following css selector :
.modal .modal-inner.modal-video {
width: 90% !important;
padding-top: 50.625%;
}
to
.modal .modal-state:checked+.modal-window .modal-inner.modal-video {
width: 90% !important;
padding-top: 50.625%;
}
That website is very laggy on my device, perhaps you should reconsider the design. Or make it simpler for tablets/phones.
Nevertheless I found that text fields that follow (including) "What are your three favourite movies?" can be focused properly, and it seems there's some view on top of the first text fields in this form.
Perhaps that can lead you in the right direction. Good luck!
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;
CSS:
body{
margin:0 auto;
background-image:url("someURL"),
background-repeat:no-repeat;
background-attachment:fixed;
background-size:cover;
}
This works fine in modern browsers, the image stays the same when scrolling. On an android tablet however the image doesn't update right away. The image only updates about half a second after you release (move your finger away) and in the mean while the gap is just white.
Is there away to fix this issue or is it just how certain browsers behave?
It is known bug, you can find details here:
http://code.google.com/p/android/issues/detail?id=3301
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 ;)