The functionality of iOS 9 is hindering the accessibility of modal mobile links

On my website, I am using modal to display necessary information that requires users to click on buttons such as back and submit. However, the links seem broken even though they are supposed to redirect to another page. Whenever a button is clicked, the page reloads.

While this approach has been functioning well, some users are experiencing difficulties when trying to submit information. Upon investigation, my colleagues and I discovered that this issue only affects devices running iOS9.

After researching, we found out that the problem might be related to having an empty href.

    <ul>
        <li><a class="pop" href="#" target="#modal" data-id="deposit-funds.aspx">Deposit Funds</a> <span class="moreinfo" title="How to deposit funds into your investor account"></span></li>

        <!--<li><a class="pop" href="#" target="#modal" data-id="dynamic-invest.aspx">Dynamic Invest</a> <span class="moreinfo" title="Dynamic investing explained"></span></li>-->


        <!--<li><a class="pop" href="#" target="#modal" data-id="auto-invest.aspx">Auto Invest</a> <span class="moreinfo" title="Autoinvest guidelines, setting criteria and turning on and off"></span></li>-->


        <li><a class="pop" href="#" target="#modal" data-id="current-investments.aspx">Current Loans</a></li>

        <li><a class="pop" href="#" target="#modal" data-id="my-resale.aspx">My Resale Offerings</a></li>

        <li><a class="pop" href="#" target="#modal" data-id="completed-investments.aspx">Completed Loans</a></li>

        <li><a class="pop" href="#" target="#modal" data-id="bids-outstanding.aspx">Bids Outstanding</a></li>

        <li><a class="pop" href="#" target="#modal" data-id="my-transactions.aspx">Transaction History</a></li>
        </ul>
        </div>

If you have encountered a similar issue or have suggestions for a potential solution, any guidance would be greatly appreciated.

Answer №1

A few weeks ago, I encountered a similar issue and found a workaround by updating the href attribute to href="javascript:;". This effectively tricks the browser into executing some empty javascript code instead of doing nothing at all, which is why iOS tends to block it. Your other javascript functions will still be triggered upon click as intended.

I also experimented with converting the <a> tags to <span> tags. While this did resolve the issue to some extent, it was not a perfect solution for my specific scenario.

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

Tips for adjusting the size of Angular Material elements

In the midst of my work on an Angular application, I have been utilizing angular material components. However, as I delved into styling the application, I encountered difficulties in styling the angular material component, particularly in enlarging a dropd ...

Exploring different options for parsing HTML content and extracting text from strings that do not contain HTML/XML tags

When looking at this particular solution for stripping HTML tags from a string, the process involves passing the string to rvest::read_html() in order to generate an html_document object. Subsequently, this object is input into rvest::html_text() to obtai ...

Select interest groups with Mailchimp ahead of time

My current project involves utilizing Mailchimp to integrate a subscribe form onto my website, which includes nearly 40 interest groups as checkboxes. To showcase the form in a popup upon clicking, I have implemented jQuery Modal for this purpose. Howeve ...

What could be causing the strange output from my filtered Object.values() function?

In my Vue3 component, I created a feature to showcase data using chips. The input is an Object with keys as indexes and values containing the element to be displayed. Here is the complete code documentation: <template> <div class="row" ...

Comparing functions and function issues when using onClick in JavaScript

I have successfully created an Image Element on my web page dynamically using JavaScript. I am now trying to set an onClick event for the newly created image element. However, I am encountering a problem and I cannot figure out why?, This is the code I ...

Tips for converting a parent class Sprite into a subclass MySprite in Cocos2d-JS

There is a custom class called MySprite that extends Sprite and includes additional methods. var MySprite = cc.Sprite.extend({ ctor:function(){ this._super(); }, doSomethingStrange:function(){ //meow meow } } ); In the game s ...

I can't get the websocket to automatically reconnect unless I refresh the browser tab

Currently, I have a web server running websockets on an ESP8266. The operations are smooth on both the client and server sides, with data being sent and received. However, when the server side disconnects due to a power cycle or code upload, the client (Ch ...

Switching between different sections of a webpage

Seeking assistance with implementing a transition effect between sections on a single-page application. All sections are located on the same page, but only one section is displayed at a time. When an event occurs, the display property of the requested sect ...

Creating an Array of UIBezierPaths in Swift

Creating a 10x10 grid of squares (UIBezierPaths) in Objective-C was a breeze - just slap a "[10]" on the declaration and you're all set. But Swift arrays are a whole new ball game for me. Despite searching through numerous posts, I am still struggling ...

What could be the reason why this XMLHttpRequest demo from Mozilla isn't functioning properly in Firefox 3?

Having some trouble with getting the sample code from Mozilla to work with a REST web service in Firefox 3.0.10. Surprisingly, it works fine in IE 8! Why is this not working? Does IE 8 support XMLHttpRequest? Most examples I've seen use ActiveX allo ...

The AngularJS framework is not effectively generating the desired table structure

EDIT 1 - Here is a Plnkr example that demonstrates the issue - http://plnkr.co/edit/qQn2K3JtSNoPXs9vI7CK?p=preview ---------------- ORIGINAL CODE AND PROBLEM ---------------- I've been using the angular datatable library (angular-datatables) to g ...

Node.js unable to verify RSA-PSS signature due to validation issues

I currently have a JavaScript client and a Node.JS server setup. My goal is to sign a basic text on the client side, send the signature along with the publicKey to the server, and have the server verify the publicKey. Everything seems to work fine on the ...

execute a function upon selecting a radio button

Below is the HTML code that includes two radio buttons. The default checked button is the "lease" option. <input id="quotation_request_payment_option_lease" class="choose_payment_option" name="quotation_request[payment_option]" type ...

Using JQuery to Determine if an Element is Concealed from the User

Is there a way to determine if a specific element is hidden from the user? In my code, I have the following line that gets executed under certain conditions: $("#VersionSelectField").hide('fast'); I need to ensure that if $("#VersionSelectField ...

When using the .append method in jQuery, the JSON array only displays the last value of the array when iterating through it with

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Displaying Array Data in Table Using Javascript</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">& ...

Show the screen name of a user upon disconnecting from the server

When a user disconnects from the server, I want to display a message. Currently, the message is shown to all users, but I'm having trouble displaying the actual user's name. Instead, it shows the name of the connected clients to themselves. I&apo ...

Conceal table columns on an HTML page using CSS styling

HTML: <table class="list qy"> <tr> <td>cell1</td> <td class="q">cell2</td> <td>cell3</td> <td class="y">cell4</td> </tr> </table> CSS: table.qy td.q, table.qy td.y { displ ...

Tips for arranging flex children on top of one another

I am looking to position and center both boxes so that they overlap in the middle of the screen, without specifying a fixed width and height. Additionally, I want to incorporate CSS transitions to make box 1 disappear and reveal box 2 upon clicking a butt ...

Ensure that everything within the Container is not see-through

Fiddle:https://jsfiddle.net/jzhang172/b09pbs4v/ I am attempting to create a unique scrolling effect where any content within the bordered container becomes fully opaque (opacity: 1) as the user scrolls. It would be great if there could also be a smooth tr ...

expanding the close window icon beyond the boundaries of the modal container

I seem to be experiencing a CSS mistake that I can't figure out. The close window icon in my modal window is getting cut off at the edge and not displaying properly. Check out this JSFiddle link <div id="sendMsgForm" class="modal"> <div ...