JS/CSS bottom fixed positioning differs on web v mobile web

Question

I have a modal that I need to be position fixed on the bottom of my screen. It works fine on browser using CSS

position: fixed;
bottom: 0px;
top: auto; // overwrite top:0

Works perfectly on web browser, but on mobile web, this fixes the modal to the bottom of the HTML instead of the screen. Even on the tiniest screen, the HTML is at least twice as long as the screen. Unfortunately the modal also closes with an onClickOutside, so it's impossible to access the modal.

This is especially bad since part of the site is used by a wrapped app, which needs the modal more than the desktop browser.

Is there another property that I need to add in CSS to handle mobile safari and chrome? Something I can do in JS without adding a module? Thanks

EDIT: Some more info that may help

JSX Structure

<body>
    <div>
        // lots of nesting later
            <CustomInput onClick={this.toggleModal} />
    </div>
    <CustomModal />
</body>

I can't control this as the Modal is rendered from a module, so I can't move it adjacent to CustomInput.

The browsers I'm using are up-to-date Safari and Chrome on a recently updated iPhone as well, so there shouldn't be any concern about outdated behavior on browsers.

Here's a simplified codepen where it seems to happen: https://codepen.io/anon/pen/OjgWYL Check it out on different magnifications

can you give more details you say page and screen, is the page not the full height etc of the screen. Look at how your parent elements are, you might need to set them to position relative etc. Some mobile browsers can act differently if you can post screen shots etc, any more that can help what you have, more code as well — Simon Davies, Aug 09 '17 at 22:39
Thanks for feedback Simon - I made some edits, including adding a CodePen that should show the issue where the fixed element seems fixed to the bottom of the HTML instead of the 'screen' if you open with a mobile browser. — Sergey Kolchinskiy, Aug 10 '17 at 15:35
Your example works fine in Chrome and Safari on iOS. Most likely the problem [Why does `position:fixed` not work when viewed in an `iframe` using an iPhone or iOS device?](https://stackoverflow.com/questions/27083740/why-does-positionfixed-not-work-when-viewed-in-an-iframe-using-an-iphone-or) is still valid for the current release. So it does not work in codepan, because the preview is shown in an `iframe`. — t.niese, Aug 10 '17 at 15:42

Mr. Hugo · Answer 1 · 2017-08-10T15:30:18.910

Could it be that you are using an outdated/older version of Android or iOS? The CSS position: fixed used to be treated as position: absolute by these devices, explaining the behaviour you are experiencing. To make sure this is not the case, you can check the user-agent to get the iOS or Android version and add the class 'old_Android' or 'old_iOS'. That is how I have solved this in the past.

Here is the code I have used:

var useragent = navigator.userAgent;
//check for old stock Android browser (so not Chrome)
//to remove position fixed and background attachment fixed
if( (useragent.indexOf("Mozilla/5.0") > -1) &&
    (useragent.indexOf("Android") > -1) &&
    (useragent.indexOf("Chrome") == -1)
) {
    $('body').addClass('old_Android');
}

//check for old iOS version 
//to remove position fixed
var iOS_version = iOSversion(useragent);
if(iOS_version[0]<5) $('body').addClass('old_iOS');

Here is some reading material on this (ancient) topic: http://bradfrost.com/blog/mobile/fixed-position/

Thanks for this! I did check out that thread before opening this StackO Q, but it was not much help. Both browsers I'm testing this on (Safari and Chrome) are up-to-date on a recently updated iPhone, so this fix did not seem to help. Appreciate it though! — Sergey Kolchinskiy, Aug 10 '17 at 15:25

JS/CSS bottom fixed positioning differs on web v mobile web

1 Answers1