On iPhone, links located under a fixed-positioned div can be easily clicked

I am facing an issue on our mobile website where the footer with fixed positioning overlaps with a scrolling feed underneath it, causing the links in the feed to be clickable from the footer area.

Footer CSS:

.footer {
position: fixed;
bottom: 0;
right: 0;
left: 0;
z-index: 1030;
height:45px;
.background-image-gradient (@topFooterColor, @bottomFooterColor);
box-shadow: 1px 0px 1px 1px rgba(0, 0, 0, 0.45);
background-repeat: repeat-x;
text-align:center;
border-top: 1px solid @topFooterBorder;
}

The feed is inside a div named status_updates:

.status_updates {
border-left:0px;
margin-top:0px;
margin-bottom:10px;
}

The issue arises because the links within the status updates div remain clickable through the footer at the bottom of the screen.

I have tried adjusting the z-index of .status_updates but to no avail. It seems that the fixed position of the footer overrides it.

While one solution would be to make the .status_updates div absolute and adjust the heights accordingly, this would require restructuring many other pages on the site.

Is there a way to resolve this without changing the fixed positioning of the .footer div and maintaining relative positioning for the .status_updates div?

A visual representation of the problem can be seen below:

iphonehtmlcsspositioningz-index

Answer №1

As mentioned by another user, there is a common problem with browsers that can be resolved. I encountered a similar issue and was able to fix it in the following way.

To prevent links from appearing behind the footer and causing click-through issues, you can add a margin-bottom to your scrolling content equal to the height of the footer. For example, if the footer is 45px high, use margin-bottom: 45px on the scrolling content. This will create the illusion that the content is scrolling behind the footer when in reality it is simply scrolling up to the footer level.

This solution works well unless your footer has transparency or translucency that allows the content below to show through.

Answer №2

This particular issue is a well-documented bug. Essentially, when the scroll is triggered programmatically, the fixed element becomes clickable through.

For further insights into this problem, you can refer to Remy Sharp's informative article.

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 are the steps for applying a Bootstrap class to an element?

I keep encountering this error in the console: Uncaught DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided ('si col-md-4') contains HTML space characters, which are not valid in tokens. Below is a ...

javascriptjqueryhtmltwitter-bootstrapfirebase

JSON Novice - persistently storing data in JSON during browser refreshes

My AJAX poll was set up following a guide found here: http://www.w3schools.com/php/php_ajax_poll.asp Instead of storing the poll entries from an HTML radio button in an array within a text file as demonstrated in the tutorial, I wanted to save them in a J ...

javascriptphphtmljsonajax

Is there a way to horizontally align my navigation bar links with CSS while maintaining grey borders on the sides?

What is the best way to center my navigation bar links using CSS without losing the grey sides? Both Blogs and History have dropdown menus. Check out this screenshot: (source: gyazo.com) CSS: .navbar ul { list-style: none; margin: 0; pad ...

htmlcsscenter

What is the best way to increase a numerical input?

While experimenting with HTML input elements, I decided to utilize the step attribute. This allowed me to increment the current value by 100 when clicking the up or down arrows in the input field. However, I discovered that the step attribute restricts th ...

javascripthtmlhtml-input

Retrieve the chosen option from a dropdown menu and transfer it to the submit button in PHP

I have a unique situation where I need to extract and store selected values from two separate drop-down menus generated from arrays. The goal is to pass these selected values in the submit button link. For example, if a user selects "123" for email and "t ...

javascriptphphtmljquery

After a brief delay, I aim to eliminate a className or restart the class animation when a certain condition is satisfied

Objective: My goal is to create a feature where the price number highlights with a color for a brief moment when there is a price change using toggleClassName. Challenge: The issue arises when the iteration is UP UP or DOWN DOWN, as the element already ha ...

cssreactjs

Trouble loading JSON files

I am currently encountering an issue and would greatly appreciate some guidance or best practices. My Titanium SDK version is 1.6.1 and my iPhone SDK version is 4.2. My application performs the following task: it retrieves a remote JSON file to sync with ...

iphonejsonfileloadtitanium

Is your URL getting cut off in jQuery?

How can I properly display a URL in an HTML table without it getting truncated? I'm attempting to show it within a table using jQuery, but it seems to be cutting off the URL. Here's a snippet of my code. Any suggestions on how to fix this? <! ...

javascriptjqueryhtml

The functionality of the Bootstrap tabbed pane is not functioning correctly

I am currently in the process of creating a modal tabbed pane in bootstrap following the instructions provided in this guide. You can view the code and functionality on this fiddle. $(document).on("click","#tabs a",function(event) { alert("!!!"); ...

javascriptjquerycsstwitter-bootstrap

Following the modification of the Context root, the JSP page is no longer functioning as expected

Recently, I developed a JSP page within the webapp that utilizes jquery, CSS, and Angular JS. The files jquery-1.12.0.js, angular.min.js, and TableCSSCode.css are all located in the same directory as the JSP page. Initially, my application context was set ...

jquerycssangularjsjspweb

New to the world of web design and seeking answers as to why my style is not being applied

After diligently following the courses on CodeAcademy (I know, kind of lame but it's a start), I finally feel confident in my ability to write my own HTML and CSS code. However, when I tried to do so using Sublime Text 3 and opened my HTML file, I not ...

htmlcss

Retrieving a specific view by utilizing the primary key in the URL pattern

Greetings. I am facing some difficulties in retrieving the URL with the passed argument (pk). An error occurs where I receive post_edit, which is related to another application on the website. Here is the error message: NoReverseMatch at /questions/questi ...

pythonhtmldjango

What does the visual representation of <html> look like, exactly?

Where does the scroll bar belong, within the <html> or <body> tags? I've always included it in every HTML file, but unsure of its specific purpose. ...

html

Solution for repairing the display location button on Android within a React Native Map

I am facing an issue with the Location Button in my React Native Maps app. When the app is opened for the first time and the map is rendered, the button disappears. However, if I close the app but leave it running in the background, upon reopening the app, ...

javascriptcssreactjsreact-nativereact-native-maps

Issue with React router not functioning correctly when dealing with dynamically created anchor tags utilizing jquery

As a newcomer to React.js, I have incorporated jQuery into my project to handle mouse and click events for cloning navigation elements, specifically <li> tags within <a> tags. The cloned elements are displayed in a targeted div ID successfully. ...

javascriptjqueryhtmlreactjsreact-router

Guide on automatically removing a DOM element in Jquery after a set amount of time

Is there a way to delete an HTML element after a specific period of time? If a certain condition is met before the allotted time, I want to pause the timer from deleting the element. Here's a snippet of code for reference: <ul> <li dat ...

javascriptjqueryhtmlnode.jstimer

Create a dynamic div element using Jquery that is generated based on text input

I am attempting to dynamically insert a div based on the text within the parent container. My HTML structure is as follows: <div class="listing_detail col-md-4"><strong>Living Room:</strong> Yes</div> <div class="listing_detail ...

javascriptjqueryhtml

Display the modal values in a hidden form field within a textarea, and then it will be automatically

Within my setup, there are two forms. The first form contains a textarea, while the second form appears in a modal. Below is the code for form 1. <div> <textarea name="dynamic-content-unit" id="dynamic-content-unit" class="for ...

jqueryhtmlformsbootstrap-modal

Exploring the ID search feature in JavaScript

I'm facing an issue with implementing a search feature in my project. Here is the HTML snippet: HTML: <input type="text" id="search"> <video src="smth.mp4" id="firstvid"> <video src="smth2.m ...

javascripthtml

Calculating the depth of a webpage with Python

I need help determining the depth of a website through Python. The depth of a subwebsite is defined as the number of clicks needed to reach it from the main website (e.g. www.ualberta.ca). For example, if a subwebsite like www.ualberta.ca/beartracks requir ...

pythonhtmlcssweb-scrapingweb-analytics