Positioning a fixed div can result in the page being cut off on certain mobile browsers that are not

Question

Positioning a fixed div can result in the page being cut off on certain mobile browsers that are not

While there are numerous similar issues out there, the bug I am encountering feels unique. This issue involves a page with a div in position:fixed style, specifically affecting certain less common mobile browsers like Star Safari, DU Browser, and Tint Browser. When the page height exceeds about 1500px, the bottom of the page gets truncated - displaying a complete white curtain. Strangely, this bug does not occur in more popular browsers such as chrome, firefox, opera, or safari.

Attached is a screenshot from my phone (HTC M8 - Tint Browser) where the bug is visibly reproduced. Additionally, I have observed the same issue on Samsung S5 devices.

The main purpose for having a fixed div in my case was to create a menu button that would stick to the viewport, making it easier for visitors to access the menu without scrolling back to the top of the page.

I have provided a partial solution below, but I will wait a week before marking it correct, hoping that someone else might come up with a better resolution.

- Tim

css cross-browser css-position mobile-browser

Answer 1

Answer №1

Termed as a "part-solution" due to two primary reasons:

1) The div will not remain perfectly fixed; instead, it gracefully adjusts after a scroll event.

2) Although it doesn't permanently truncate the page, there is a brief 'curtain' flash during opacity transitions. Quite odd, isn't it?

UPDATE: It's important to note that while this solution appears sleek on major browsers like Chrome and Safari, the flashing curtain effect may be observed in browsers where the fixed position div would usually cause truncation. Despite its imperfections on less popular browsers, it remains a preferable option compared to other alternatives, posing only a minor style compromise for more widely used browsers.

This code snippet showcases an example of a menu button that can be tailored to suit your specific requirements.

HTML Example

<body onscroll="menuButton()">
    <div style="height:2000px; border: thick dotted green; width:90vw; background-color:#131313"></div>
    <div id="menuButton">
        <div class="image"></div>
    </div>
</body>

CSS

#menuButton {
    position: absolute;
    top:25px;
    left: 25px;
    opacity: 1;
    z-index: 1001;
    transition: opacity .4s ease-in-out;
    -moz-transition: opacity .4s ease-in-out;
    -webkit-transition: opacity .4s ease-in-out;
}

.image {
    width:50px;
    height:50px;
    background-color:red;
}

JavaScript

function menuButton() {
    setTimeout(function () {
        var button = document.getElementById("menuButton").style;
        var pos = document.documentElement.scrollTop || document.body.scrollTop;
        var newPos = pos + 25 + 'px'; // Offset represents the initial value of the div's top position.
        button.opacity = 0;
        setTimeout(function () {
            button.top = newPos;
                    setTimeout(function () {
                        button.opacity = 1;
                    }, 500);
        }, 500);
    }, 800);
}

Check out this JsFiddle link to see it action.

Answer 2

Termed as a "part-solution" due to two primary reasons:

1) The div will not remain perfectly fixed; instead, it gracefully adjusts after a scroll event.

2) Although it doesn't permanently truncate the page, there is a brief 'curtain' flash during opacity transitions. Quite odd, isn't it?

UPDATE: It's important to note that while this solution appears sleek on major browsers like Chrome and Safari, the flashing curtain effect may be observed in browsers where the fixed position div would usually cause truncation. Despite its imperfections on less popular browsers, it remains a preferable option compared to other alternatives, posing only a minor style compromise for more widely used browsers.

This code snippet showcases an example of a menu button that can be tailored to suit your specific requirements.

HTML Example

<body onscroll="menuButton()">
    <div style="height:2000px; border: thick dotted green; width:90vw; background-color:#131313"></div>
    <div id="menuButton">
        <div class="image"></div>
    </div>
</body>

CSS

#menuButton {
    position: absolute;
    top:25px;
    left: 25px;
    opacity: 1;
    z-index: 1001;
    transition: opacity .4s ease-in-out;
    -moz-transition: opacity .4s ease-in-out;
    -webkit-transition: opacity .4s ease-in-out;
}

.image {
    width:50px;
    height:50px;
    background-color:red;
}

JavaScript

function menuButton() {
    setTimeout(function () {
        var button = document.getElementById("menuButton").style;
        var pos = document.documentElement.scrollTop || document.body.scrollTop;
        var newPos = pos + 25 + 'px'; // Offset represents the initial value of the div's top position.
        button.opacity = 0;
        setTimeout(function () {
            button.top = newPos;
                    setTimeout(function () {
                        button.opacity = 1;
                    }, 500);
        }, 500);
    }, 800);
}

Check out this JsFiddle link to see it action.

Positioning a fixed div can result in the page being cut off on certain mobile browsers that are not

Answer №1

Similar questions

I'm attempting to resize my images to fit within the container, but instead they appear enlarged

How can I apply a blurred effect to the background image of a jumbotron in Bootstrap-vue without affecting the clarity of the text overlay

Immersive image display

Instructions on creating a non-editable text area where only copying and pasting is allowed

Tips on altering the h2 color when hovering using h2:hover:after

Arrange the text in a div element in a horizontal direction

Detecting unutilized space in a collection of divs with varying sizes using JavaScript and CSS

Ways to keep the footer at the bottom of the page without relying on the fixed positioning method

Steps for showcasing stars (1-5) based on the data stored in the database

"What is the best approach to adjusting the width of one div based on the width of another div using CSS Grid

"Enhance Your Website Navigation with Bootstrap Navbar Links Extensions

JavaScript function to toggle the visibility of navigation with a click of a button

Hover over the Div element for inline effect

Using HTML and CSS to stack a DIV on top of another using z-index

Jquery Parallax causing scrolling problems across different browsers

elements with a display of inline-block and a fixed body width

Use jQuery to swap out two div classes within a table cell (TD) if they are

Empower the parent container to wrap around its child elements using Flexbox

Center alignment is not being applied to the SVG element

Unable to alter the background color in a table row when a condition is verified