I was able to resolve the fixed position issue of a button on Safari for iPhone 3G

Here is the setup I have on jsfiddle:

http://jsfiddle.net/zZDqH/

Currently, there is a button fixed at bottom:0px. You can scroll up and down the page, and the button will stay at the bottom of the page.

However, when testing in Safari on an iPhone 3G (v4.2.1), the button's position does not remain at the bottom of the page. It moves when you scroll.

I would appreciate any advice on how to fix this issue.

Thank you

Answer №1

Unfortunately, older versions of iOS do not support the position: fixed property.

You can find a solution to this issue at this Stack Overflow thread about using CSS "position: fixed;" on iPad/iPhone.

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

Unexpected output from Material UI Textfield

When attempting to print a page of my React app using window.print(), everything prints correctly except for the Textfield component from Material UI. It works fine when there are only a few lines of text, but when there is a lot of text, it appears like t ...

Issue encountered when trying to attach a hover event to the items in a comb

Currently, I am facing a specific situation. The requirement is to display a custom tooltip when the mouse hovers over the combobox items (specifically the "option" tag). Initially, my solution involved using the title tag. While this method worked effecti ...

Incorporate a JSON file into the Webpack output separately from the bundle.js file

Is there a way for my webpack application to read a JSON file at runtime without including it in the bundle.js after packaging? I want the JSON file to be available in the package folder but not bundled with the rest of the code. How can I achieve this? ...

When adding a new div, ensure it is counted and delete it once a new div is added

When clicked, a new div is added. When clicked again, another div with the same content is created as a duplicate. Q: Is there a way to remove the previous div when a new one is created? $(document).on('click', '.LibSectOpen', functio ...

The error "navigator.permissions.query is not a defined object" is encountered in the evaluation

Whenever I try to access my website on an iPhone 7, I encounter a frustrating error. The main screen loads without any issues, but as soon as I click on something, a white bank screen appears. I believe this piece of code might be the cause: useEffect( ...

Creating a mobile-friendly navigation bar with Vuetify for optimal responsiveness

I am attempting to utilize a vuetify tab component as my navigation menu in order to create a responsive navbar using vuetify. The goal is to have a normal navbar that functions like usual, but when viewed on a mobile device, it should hide the menu and di ...

The application of CSS transition fails in the context where top property is set as auto

I have been exploring an online tutorial that almost met my requirements. However, I encountered a challenge with the CSS 'transitions' effects. Basically, I need the text to be positioned at a specific distance from the top because the title wi ...

Tips for adjusting the font size of a Chip using Material-UI

I am using a widget called Chip const styles = { root:{ }, chip:{ margin: "2px", padding: "2px" } } const SmartTagChip = (props) =>{ const classes = useStyles(); return( <Chip style={{color:"white&q ...

Is it possible to alter the name of a slot before displaying the element in the shadowDOM, depending on the slot utilized in the DOM?

In my project, I am working on implementing different features for both desktop and mobile devices. Some of these features can be replaced by slots. My goal is to have a slot that can be either replaced by a desktop slot called poster-foreground, or a mobi ...

Always ensure that only one div is visible at a time

I am currently working on a project where I cannot use ng-cloak due to the way the css files are loaded. I have been exploring alternative solutions and have tried a few different approaches. My main goal is to ensure that two icons are never shown at the ...

Managing numerous ajax forms within a single page

Upon receiving advice from the following inquiry Multiple forms in a page - loading error messages via ajax, I am endeavoring to incorporate multiple forms within one page. The goal is to insert error messages into the corresponding input div classes. I pr ...

Storing user feedback in database using ajax

I have encountered a common issue in this thread, and although it has been discussed multiple times, I am still unable to solve my problem. My struggle lies in sending and fetching data from comment.php to insert.php. Below is the code from my comment.php ...

Tips for changing form field values using jQuery

Is there a way to use jQuery to retrieve the values of multiple checkboxes and insert them into a hidden form field? Here is how my checkboxes are structured: <form> <input type="checkbox" name="chicken" id="chicken" />Chicken <in ...

Listening to changes in a URL using JQuery

Is there a way to detect when the browser URL has been modified? I am facing the following situation: On my webpage, I have an iframe that changes its content and updates the browser's URL through JavaScript when a user interacts with it. However, no ...

Full width display without any scrollbars

I need some help with adjusting the width of a section on my webpage to fit the browser size. Currently, I am using width: 100%, but this is causing scrollbars to appear. Unfortunately, I can't use overflow-x: hidden; as it will hide some of the conte ...

Adjust the size of my navigation bar to match the dimensions of the browser

I'm currently facing an issue with my website's navigation menu on mobile devices. I've been attempting various solutions to make the navigator scale up appropriately with the browser, but so far nothing seems to be working. Below is the HT ...

Bootstrap - Progress Bar Display

I have a mobile application that is built using Bootstrap 3. I am currently working on creating a responsive progress indicator for the app. This indicator will consist of three to five steps, each showing an icon, step name, and status. On mobile devices, ...

When attempting to input data into the database, an error is displayed stating that /test.php cannot be POSTed

Every time I try to input data using PHP, it throws an error Cannot POST /test.php. I've been attempting to fix it with no success. Can anyone please help me solve this issue? It's crucial for my project work. Here is my HTML code: <html> ...

The audio must start playing prior to being forwarded to a new page

As I delve into the world of website development on my own, I have encountered an interesting challenge. At the top of my webpage, I have embedded an audio file within a button. If the user chooses to mute the audio, the navigation links will remain silent ...

"Running experiments with Google Ads and Google Analytics scripts results in a blank page being displayed

Currently, I am working on a plain HTML file and conducting tests to ensure that the Google Ads and Analytics scripts are functioning correctly before implementing them on other pages. A colleague who has an AdSense account provided me with the script code ...