Issue with Safari causing footer to sporadically appear over overlay

I am encountering a problem with my webpage that has a sticky footer, scrolling content, and an overlay that appears after a few seconds. The issue is specific to Safari on certain devices like iPhone 12-15, where the footer and part of the scrolling content sometimes overlap the bottom section of the overlay. This inconsistency leads me to believe it's not a CSS problem but possibly related to how the scroll changes the container's height. Despite setting the overlay content to fill the entire screen, parts get cut off when the footer and content render on top. All elements are contained within the body tag.

<body style="overflow: hidden; position: absolute; height: unset;">
  <div class="page">
     <main style="display: block;">
        <div class="content" style="position: relative; display: flex; flex-direction: column;">
           <div class="footer" style="display: block; width: 100%; left: 0; bottom: 0; position: fixed; pointer-events: auto;">...</div>
           <div class="scroll_content" style="max-width: 100vw; overflow: hidden;">...</div>
        </div>
     </main>
  </div>
  <div id="overlay" style="position: fixed; left: 0px; bottom: 0px; width: 100vw; height: 100%; z-index: 9223372036854776000 !important;">..</div>
</body>

Is it possible that Safari renders elements in a different order at times? I'm struggling to reproduce the issue consistently and determine its cause, so any help or insights would be greatly appreciated!

Apologies for the generic illustration, as replicating the exact scenario is challenging :)https://i.sstatic.net/Bhjvi.png

Answer №1

When positioning elements, it's important to consider the layout of your containers. Try reorganizing them in a more logical way to better fit the template design...paste your HTML code here and get started

    /*
        Ensure that your viewport takes up the entire screen without any padding or margin
    */
    html, body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
   /*
        The new scrolling container should have the full height of the screen and full width by default of a div.
        Using box-sizing: border-box ensures padding and margins are included in the total width calculation
    */
    .page {
        height: 100%;
        box-sizing: border-box;
        overflow-y: auto;
        background-color: green;
    }
    /*
        Place your footer outside the scrolling page, fixed to the bottom of the screen with z-index: 1
    */
    .footer {
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 1;
        background-color: yellow;
    }
    /*
        The overlay should also be positioned outside the scrolling page, fixed to the viewport at z-index: 2 to ensure it appears above the footer.
        Added opacity for transparency
    */
    #overlay {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 2;
        background-color: pink;
        opacity: 30%;
    }
<div class="page">
    This is where your scrollable content should go
    <p style="height: 2000px;">Force overflow</p>
</div>
<div class="footer">
    Here lies your footer, fixed to stay outside the overlay
</div>
<div id="overlay">
    <br /><br /><br /><br />The overlay sits above the scrollable content, but with some transparency allowing scrolling beneath
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Lost in a sea of confusion with ember-cli-postcss and autoprefixer

I'm currently working on an ember build that incorporates autoprefixer. My issue arises from the fact that the output location for 'assets/application-name.css' has shifted from its normal path to 'app/styles/app.css', and I would ...

Troubleshooting Alignment Problems in HTML5 and CSS

Check out my awesome page here: My Page To help with troubleshooting, I've assigned different background colors to the 3 sections of my page. The "Zine" should be red, the "Book Cover" green, and the "Magazine" yellow. However, I'm experiencing ...

For all URLs, redirect from HTTP to HTTPS unless the request is coming

I recently transitioned my node.js app to use https. To achieve this, I configured https through an nginx reverse proxy. However, I encountered a problem where, when I type in example.com, it does not automatically redirect to https://example.com. In an at ...

Unable to implement the `omega/theme.css` file within the angular.json configuration

"styles": [ "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css", "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.css", "node_modules/primeicons/primeicons.css", ...

What is the reason behind Angular not allowing users to define @Output events that begin with 'on'?

While developing a component, I defined an output EventEmitter named onUploaded. However, Angular flagged an error instructing me to use (uploaded) instead. This restriction is due to security concerns, as bindings starting with 'ono' pose risks. ...

Access RSS feeds externally without relying on any third-party libraries or server-side processing

Looking to integrate an RSS parser that can parse feeds using jQuery/JavaScript without relying on the Google Feed API or any server-side solutions. The goal is to have auto-updating RSS feeds without overloading the server with multiple requests from user ...

Mixing strings with missing slashes in links

console.log(mylink) When using the console to log mylink, the expected result is a normal link like http://example.com/something.jpg. I tried concatenating it as shown below: var html = '<div id="head" style="background:linear-gradient(rgba(0, 0 ...

Elevating the parameter in ReactJS: How many levels up?

My goal is to pass the key of the component upstream when there is a change. For example, I have the following code snippet: onChange= {(e) => this.props.onChange(e, key)} The issue arises because this.props.onChange references its own props.onChange ...

Properties of a child class are unable to be set from the constructor of the parent class

In my current Next.js project, I am utilizing the following code snippet and experiencing an issue where only n1 is logged: class A { // A: Model constructor(source){ Object.keys(source) .forEach(key => { if(!this[key]){ ...

What is the process behind Stackoverflow's "Congratulations, you've earned a new badge" popup window?

Possible Duplicates: Custom notify box similar to StackOverflow Creating popup message like StackOverflow How does StackOverflow implement the "You earned a new badge" window? (the orange one that pops up at the top of the screen, I believe it&ap ...

Ensure that a sprite object is constantly positioned in front of a skydome object within THREE.js

Currently, I have implemented a custom shader to draw a gradient on a skydome and now I want to include a sun/moon in front of the skydome as well (from the user's perspective). The simplest solution would be to use sprites for the sun and moon, but t ...

What are some effective ways to utilize asynchronous ORMs without getting bogged down in overly long callback

Currently, I am utilizing the Joose Javascript ORM plugin, which is still quite young (project page). This is being used to store objects in an Appcelerator Titanium mobile project (company page). Due to the storage being on the client side, the applicatio ...

Tips for accessing various ejs files in an html document efficiently to reduce code verbosity

How can I streamline navigation to multiple ejs files in my HTML without repetitive code in my server.js file? I am using Express with hidden file extensions. Below is an example of my current setup. HTML <a href = "/contact"> Contact Us & ...

Creating a spacious text box for an enhanced Ajax search feature

I'm currently working on an AJAX application that allows users to input the name of a movie, and then loads results from the database through jquery using a PHP API. However, I'm facing a challenge in implementing a text box with the following re ...

What is the correct way to superimpose an image with a transparent background?

I am currently working on a mini game that involves overlaying images on camera views. The goal is to have the gun displayed without the background rectangle, as shown in this image: https://i.stack.imgur.com/yU4A2.jpg The code snippet below is relevant ...

Translate3d increases the whitespace towards the end of the page

After implementing a smooth scroll on my webpage using transform translate3d, I encountered an issue. The translate3d function seems to be adding extra space at the end of the document, as illustrated here: https://codepen.io/anon/pen/WEpLGE I suspect the ...

What is the best way to position the list element to align with the top of a div container?

To see a live example, visit this link. My goal is to create a line that separates two li elements within a nested ul. However, the line ends up taking the width of the container ul instead of the div containing the entire structure. In the provided examp ...

The function Router.use is looking for a middleware function, but instead received an object in node.js /

I encountered an issue while trying to setup routing in my application. Whenever I attempt to initialize a route using app.use() from my routes directory, I receive an error stating that Router.use() requires a middleware function but received an Object in ...

Adjust the height of the tabs bar in the Guake terminal

Is there a way to reduce the height of the tabs bar in the Guake terminal? I found a solution for GNOME terminal on this post, where they mentioned editing ~/.config/gtk-3.0/gtk.css. Is there a similar method for achieving this in Guake terminal? ...

What is the best way to pass information from a child component to a parent component in ReactJS?

I am currently working on a project to develop a website that can adjust recipes for different serving sizes. Utilizing React, I have set up a component to handle the original servings, new servings, and number of ingredients. However, I am facing an issue ...