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

What could be causing appendChild to malfunction?

I'm having an issue trying to create three elements (parent and one child) where the third element, an <a> tag, is not appending to modalChild even though it's being created correctly. modal = document.createElem ...

Creating Radial Fades with CSS3

Seeking guidance on creating a background similar to the one shown here using just CSS. I believe it can be done, but I struggle with CSS3. The goal is for the background to be compatible with all modern browsers, not overly concerned about support for br ...

Remove the div of the previous selection in jQuery and add the current selection by appending it, ensuring only one selection per row is allowed when

Here is a code snippet that includes buttons appending selections to the "cart" div upon clicking. The first script ensures only one selection per row when multiple buttons in the same row are clicked. In the second script, selections are appended to the ...

jQuery does not seem to be able to recognize the plus sign (+)

I am currently developing a calculator program and facing some challenges with the addition function. While the other functions ("/", "-", "*") are working fine, the plus ("+") operation seems to be malfunctioning. Here's the snippet of HTML and JavaS ...

Modify the colors of <a> elements with JavaScript

I am brand new to the world of UI design. I am encountering an issue with a static HTML page. (Please note that we are not utilizing any JavaScript frameworks in my project. Please provide assistance using pure JavaScript code) What I would like to achie ...

Selection box containing options retrieved from MySQL database dates

I am trying to populate an HTML dropdown with data from a MySQL database. I ran the query in PHPMyAdmin and it worked fine, returning one record. The entire website is connected to this MYSQL details. Here is my code:  <?php mysql_connect("loc ...

Creating a CSS auto center for elements, with a unique twist

I have a design layout like this: Click here to view the image My auto-centered content is styled with the following CSS: width: 960px; margin: 0px auto; Within this auto-centered content, there is a DIV element that needs to span the full width of the ...

Does WebSVG struggle with producing sharp, defined lines in its inline format?

Upon page load, my SVG background starts as separated and then smoothly transitions into forming the background. However, I noticed that a large triangle with poor quality and choppiness appears at the beginning. What could be causing this issue? For an e ...

Unexpected resizing of a div due to Vue animation

I'm currently working on a quiz and I'm trying to incorporate some animation effects when users navigate between questions. I've been experimenting with a fade in and out effect, but there seems to be a glitch. Whenever I click the button, t ...

Personalized Bootstrap 4.1 Toggle Animation

I have been attempting to implement a customized menu toggle on Bootstrap 4.0's Navbar menu, using the code provided by Codeply HERE. My goal is to apply the X toggle style to my website's bootstrap navbar. Below is the current setup I have imple ...

What is the best way to eliminate the Iframe scrollbar while ensuring that the entire page loads?

When I add an Iframe inside the contentArea, two scroll bars appear. I am looking for a way to hide the iframe scrollbar without hiding any of the external website's content. I have tried using the scrollbar="no" snippet code, but it didn&ap ...

Request Fancybox from parent document within an iframe

I have two pages, my index.html and social.html. I recently cleaned up my index.html file and left only the necessary jQuery code for using fancybox. My goal is to display images from social.html within fancybox when clicked on, but it should open in index ...

The div needs to be positioned above another div, not beneath it

Just returning to the world of coding and struggling with a basic problem. Any help would be greatly appreciated. I am trying to position the 'header-top' (red) div at the top, and the 'header-bottom' (blue) div at the bottom. However, ...

Exploring the World of Print CSS, Embracing Bootstrap, and Master

In continuation of my previous query, I am facing an issue with setting up a filemaker foreach loop to display a group of images along with their names and IDs, accompanied by checkboxes. Upon checking the relevant checkboxes, the corresponding images are ...

Using gradient colors for the background on the ::selection pseudo-element

Can you apply a gradient color to CSS ::selection? I tried using the following code: ::selection { background-image: -webkit-linear-gradient(left, #ee4037 0%, #eb297b 100%); } However, it did not have the desired effect. ...

Ways to reposition JavaScript output within a webpage

I am new to HTML, CSS, and JavaScript and I have a question regarding how they work together. I can use JavaScript to display objects on the page, but I'm unsure how to move them around like other elements. Is CSS the solution for this? Any advice w ...

Scrollbar customization feature not functional in Firefox browser

I recently finished developing a website and I have customized the main vertical scrollbar. Unfortunately, I am facing an issue where it works well on Google Chrome and Safari but not on Mozilla Firefox. Does anyone have any suggestions on how to trouble ...

Can you explain the distinction between align-content and align-items?

Can you explain the distinction between align-items and align-content? ...

Applying position: absolute in HTML/CSS to lock parent and child elements in

Transform the boxes into concentric circles (circles within each other that share the same center). The outer circle should be black with a size of 300px and the inner circle should be white with a size of 200px. html: <div id="p10"> <div id ...

Unable to retrieve the values from document.getElementById("") or document.getElementById("").innerHtml appears to be malfunctioning

I am currently working on an HTA application that includes multiple <input type="text"> fields for users to input data. My goal is to pass this data to a VBScript for processing. Below is the HTML structure: <div id="tableContent" name="tableCon ...