Tips for iOS Safari: Prevent the main page from scrolling underneath an overlay, while still allowing the overlay to scroll independently

When applying an overlay to a web HTML User Interface on iOS, you may encounter the issue where the underlay page continues to scroll beyond the overlay even after setting overflow: hidden on the body or html. Interestingly, this problem does not occur on desktop or Android devices.

Answer №1

To address this issue, I implemented a solution where the body's position is set to fixed with top, bottom, left, and right all set to 0 when the overlay appears. Upon closing the overlay, the position is then reset to static.

body {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

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

Adjust the size of the text and save it in a cookie for later use

I am in need of a script that can dynamically increase and decrease the font size on a website while retaining the user's chosen setting even after they return to the site. I believe utilizing cookies is the way to achieve this functionality. Despite ...

I'm struggling to find a way to turn off the scroll bar

I'm having trouble disabling the scroll bar on my website for specific reasons. Can anyone provide me with some guidance? <iframe src="video" width="960"height="540" frameborder=0 ></iframe> ...

Can I grant Twitter access to the server on iOS?

My goal is to provide users with the ability to select a Twitter account and authorize the app using Accounts.framework (and possibly Fabric) in order to perform a specific action. However, I would like my server to handle the actual execution of this acti ...

An alternative factor to snapToPoint is dictating the layout in UISnapBehavior

I've recently started learning about animation and I'm having trouble figuring out why UIAnimation and UISnapBehavior are causing my UIButtons to shift off-center. It seems like there's something affecting the layout that goes beyond just th ...

Is there a way to prevent an inline SVG from appearing at a random height without specifying its height or the height of its parent element?

Displayed here is a simplified Bootstrap 3 layout. The middle column in the row features an inline SVG that transitions from a blue box to a green box. I've opted for styling SVG with browser CSS because I find it interesting! Additionally, this appr ...

A side navigation menu smoothly glides into view from the right side of

Here is the code for setting up a navigator menu: let menuIconImageView = UIImageView(image: UIImage(named: "menu_icon")) menuIconImageView.contentMode = .scaleAspectFit menuIconImageView.frame = CGRect(x: 35, y: 30, width: 35, height: 30) ...

Mastering the art of changing text color based on element class name in CSS3

Is it possible to dynamically set the text color of a list item based on the class name of its nested span element? For example, if the span has a class of "green", the text color of the parent li should also be green. How can this be achieved? Demo:https ...

Struggling to follow the placement of elements within the treeview component

I have successfully implemented a method to track the positions of Div elements on my webpage. However, I am facing an issue with keeping track of the position of a div within a modal popup extender that contains a TreeView. The position is always reset to ...

Creating a CAShapeLayer with a variety of vibrant hues!

Currently, I have implemented a CAShapeLayer that animates in sync with a UISlider, following guidance from this answer. However, I am facing an issue where the shapeLayer only displays as one red CAGradientLayer color throughout the animation. What I aim ...

CSS - when "start" is not 1, an alternative to the "nth-child" selector

Imagine a scenario where you have a list of questions that start at 0 and you want to apply CSS styling based on their value. For instance, consider the following list... <b>How are you feeling?</b> <ol start="0"> <li>Great< ...

Having Trouble with Font Awesome Icon Loading in Search Box

Currently, I am working on a website located at . However, I am facing an issue where the font awesome icon is not loading properly and is only displaying a square. I have thoroughly reviewed the CSS and cannot identify any conflicting elements. Any assis ...

Guide on syncing Bootstrap 4 sliders using a single set of controls

Is it possible to synchronize a bootstrap 4 carousel with controls to a carousel without any controls? 1) When the control arrows are clicked, both carousels will slide simultaneously. 2) Hovering over either carousel will pause both carousels from slidi ...

Displaying an array in HTML where one parameter serves as the key is a common task that

{ "Id": "12345", "length": [ { "review": { "1": { "request": [ { "days" ...

Pass a string to a delegate function

I've been searching everywhere for an answer, but I'm still stuck. Your help would be greatly appreciated! I'm trying to pass a string to another location, but I can't seem to figure it out in my scenario. https://i.sstatic.net/zNArX.pn ...

Ways to dynamically adjust the color of the text font?

Below is the XML content: span style="background-color: rgb(255, 255, 0); The background color mentioned here is linked to my Java code. Since this color changes dynamically, it varies in each report. My inquiry is about how to incorporate this color in ...

Align content vertically within a div container

I have encountered an issue where I am trying to center vertically the content within a div. Here is an example of the structure: <div class="container-fluid"> <div class="row restaurant"> <div class="col-md-6"> & ...

Creating a hierarchical structure in HTML to represent a JSON object as a tree: techniques and best practices

I need help with displaying a nested JSON object that shows a one to many relationship between a parent node and its children in an organizational chart format using HTML. I have looked into utilizing Google Charts for this purpose, but I am unsure if it a ...

Using dictionary type data in an array with didSelectItemAt IndexPath in Swift 4: A complete guide

https://i.sstatic.net/VCs3z.pnghttps://i.sstatic.net/q3aJ9.png I am currently working with the userDetails data. My goal is to pass the userDetails information to another viewController when a user selects an item at a specific IndexPath. Could someone p ...

Optimizing Web Scraping in R: Selecting the Ideal CSS Selector, Class, or HTML Element

I'm struggling to figure out the best way to choose the right element for Web scraping the specific information I'm looking for. I typically use the R programming language for this task. While many tutorials make it easy to scrape data from webs ...

Having trouble showing cells in a tableview. Can anyone help me figure out what I'm missing?

I have added a link to a gist file containing my code. The first one is for the ViewController, followed by the Cell Controller and Data Model. Unfortunately, I am facing issues with my code and cannot seem to display my cells in the simulator. Visit thi ...