Workaround for iOS touch device issues

If you are facing unnatural behavior on latest iOS devices, there are ways to fix the bugs.

Latest iOS devices have single tap issues. The most common thing noticed with navigation links, multilevel dropdown or any actionable buttons in the latest versions of iOS is that it takes 2 clicks to work.

This is purely a CSS issue. This is something new for us because every website or web app is usually responsive.

Normally in a website we add hover effects, which implies that on hover the button changes color. However, in these scenarios we do not think about touch devices that do not have hover functionality like iPad and cell phones.

In touch devices on the first tap the hover action is activated first and on second tap the user get access to the link.

So we have to workaround these by either adding these hovers before and after, and focus properties in media query, which will render only for larger devices like desktop and laptop. You can also forcefully stop these events through javascript and this will enable the single tap/click.

Second most common issue these days is in the Login pop-up form wherein the field-cursor pointer placement is incorrect. I have mentioned Login Modal as an example. The latest trend is the ecommerce platform. In the ecommerce sites for better user experience lots of things will show in modal. For example Login, Product review or Question/Answer etc.

If you are looking for any responsive framework like bootstrap or any other third party pop-up plugin then you may have noticed that the pop-up has a “position:fixed” property. In this scenario when pop-up/modal opens and when you click into the form field the device keyboard opens, and because of the fixed property, the cursor is in the same place and the form moves upwards.

For this we have found one solution. When the pop-up is open then you can add “overflow:hidden” to the body so the background body is never scrolled up when the keyboard opens and closes.

1. iOS call to actions are not working on single tap

Here are some different scenarios for the single tap issue.

• Navigation
• Form Buttons
• Slider buttons
• Dropdowns

Let us address these CSS issues.

• :hover, :focus
• :before, :after

CSS Workaround:

If you want to apply these properties then use media queries, which will apply only for the larger screens.

For example:

@media (min-width: 991px) {
a:hover{
color: #ffffff;
}
a:after{
content:"/70f";
color:#000000;
}
}

Javascript Workaround :

Use touch-end event, which will redirect your href in a single click.
Below is an example for touch end event. Use this under < 991px media query.

$(document).ready(function() {
$("a").on("click touchend", function(e) {
var el = $(this);
var link = el.attr("href");
window.location = link;
});
});

OR

You can use the stoppropagation to avoid the first click for CSS events like before/after :

jQuery( ".YourClassName" ).hover(function( event ) {
event.stopImmediatePropagation();
});

2.Modal cursor pointer placement issue

If you are using Modal/Pop-up for login screen or any other form in your website/app then you might have noticed this cursor placement issue in latest iOS version.
Here we find the workaround for this issue.

CSS Solution:

You need to add the below property to the document body once the modal is open.
If you are using bootstrap then you can see the “.modal-open” class will toggle for the body while modal is opened and closed.

For example :

body.modal-open {
position:fixed;
}

However, “what you see is always not a reality”. We need to look into the problems in a different way.