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

Expand the initial expansion panel within an Angular Material accordion by opening the first attachment

In Angular Material expansion panels, the expanded input can be used to automatically open a specific panel when the page loads. However, in my dynamic accordion where all panels are optional, I want the first panel to be opened by default. I could manual ...

javascripthtmlangularangular-materialaccordion

The tag's onclick function that was dynamically created was not triggering in jQuery

I created a web application using jquery mobile and ran into an issue. I am trying to call a function by clicking on a dynamically generated anchor tag, but it's not working and showing an error that the function is not defined. Any assistance on this ...

javascripthtmljqueryjquery-mobile

Is it possible to prevent a webpage from being refreshed?

I need help with an HTML page that puts the worker on pause time which will be subtracted from his/her day job. The issue is that when he/she refreshes the page, the timer starts from the beginning automatically. I want it to continue without resetting. Is ...

javascriptphphtmlcssrefresh

JavaScript tool for implementing sorting features on an HTML table

I am facing an issue with my AJAX-loaded table where I need sorting functionality implemented. Despite searching for various JavaScript plugins, none seem to work efficiently due to slow performance or errors. The structure of my HTML table is unique with ...

javascriptjqueryhtmlsorting

Commencing CSS Animation Post Full Page Loading

I am looking for a solution using WordPress. In my specific case, I want the CSS Animations to take effect only after the page has completely loaded. For example: click here This is my HTML: <div class="svg-one"> <svg xmlns="ht ...

javascriptcsswordpresssvgcss-animations

Choose options from the month dropdown menu using Selenium WebDriver

Presently focused on working with Selenium WebDriver and Java. I am attempting to pick an option from a date picker form. When trying to select the month from the dropdown of the date picker, an error is displayed stating Unable to locate element: {"method ...

javahtmlseleniumselenium-webdriver

How can I resolve the "web page not found" error when using jQuery .replace()?

Working on HTML and javascript/jquery scripts, I have encountered a peculiar issue. My script utilizes a for-in loop to iterate through a JavaScript object, substituting specific patterns in HTML-formatted lines with data from the object using jQuery .appe ...

javascriptjqueryhtml

Utilize the id in AngularJS to bring attention to a specific row within a table

I am brand new to using angularjs. I currently have a table structured like this: HTML <table class="table table-striped" id="manageResumeTable"> <thead class="text-center text-info text-capitalize"> <th class="text-center col- ...

javascriptjqueryhtmlcssangularjs

Altering the Size of Text in HTML

Currently I am working on my website and the title appears as follows <h1><font face="tempus sans itc" color="White"><div style="text-align:center">Welcome To My Website. View My Projects Here</h1></div> Is there a way to in ...

html

File index with Node.js server for handling files

I currently have a code snippet for setting up a file server that serves files from a static folder named "public1". However, I am facing difficulties in making an HTML page display by default when a user navigates to the IP address in a browser. Although ...

javascripthtmlnode.jsexpress

Utilize a DIV element to apply a class to CKEditor

Currently, I am utilizing CKEditor in DIV mode instead of an IFRAME and I am facing a challenge in assigning a class to the editor itself. While I have managed to add classes to elements within the editor, figuring out how to assign one to the editor itsel ...

classhtmlckeditor

What is the most efficient method for clearing the innerHTML when dealing with dynamic content?

Is there a more efficient method for cleaning the innerHTML of an element that is constantly changing? I created a function to clean the containers, but I'm not sure if it's the most efficient approach. While it works with the specified containe ...

javascriptjqueryhtml

Using Node.js to retrieve table data from a URL

My journey with Node JS and express is just beginning as I dive into building a website that serves static files. Through my research, I discovered the potential of using NodeJS with Express for this purpose. While I have successfully served some static HT ...

javascripthtmlnode.jsexpressweb-scraping

Angular JS application failing to load in browser due to a simple issue

I recently completed working on two pages index.html and app.js, which were created while following a helpful tutorial found here. The structure and content of each page are outlined below: index.html <!DOCTYPE html> <html ng-app ="store"> ...

angularjshtml

Hover Effect for Bootstrap Gallery

I've created a hover effect for my gallery that is embedded in a Bootstrap Grid. Although the hover effect itself works fine, on some screen sizes, the overlay ends up covering the gallery images. Does anyone have any ideas, solutions, or hints to so ...

htmlcsstwitter-bootstrap-3image-gallerymousehover

What is the reason that certain CSS pages are not being utilized on my website?

I am facing issues with rendering my website on a tablet device, specifically with my last 2 css pages (800px.css and 800pxland.css). Despite working fine just hours ago, now they seem to be neglected while all the other ones work perfectly. I have tried ...

cssftpmediatabletcloudflare

Save to clipboard HTML with forward slash

I need help creating a button that will copy a specific text to the clipboard when clicked. <button onclick="copyToClipboard('A\B\C\D')">Click here</button> However, I've encountered an issue where the text copie ...

html

Optimizing Your HTML/CSS/JavaScript Project: Key Strategies for Modular

When it comes to web frontend projects (html/css/javascript), they are often perceived as more complex to read and maintain compared to Java/C#/C/C++ projects. Is it possible to outline some optimal strategies for enhancing the readability, modularizatio ...

javascripthtmlcss

I am facing difficulties accessing an element within a controller in Angular

Struggling to access an element inside an AngularJS controller, I attempted the following: var imageInput = document.getElementById("myImage"); Unfortunately, this approach was unsuccessful as the element returned null. Curiously, when placing the statem ...

javascripthtmlangularjs

uncertainty when implementing ng-if / ng-show / ng-hide

I am facing an issue with exporting content to PDF from my HTML. When a user clicks on the export button, the PDF is downloaded, but there are certain divs whose content I do not want to be exported or shown in the PDF. However, I still want them to be vis ...

javascripthtmlangularjsangularjs-ng-if