--- title: Workaround for iOS touch device issues description: The author talks about the unnatural issues in iOS touch devices and the solutions to fix those bugs. image: https://blog.e-zest.com/hubfs/blog-files/Workaround%20for%20IOS%20touch%20device%20issues%20%20(1).jpg --- [![e-Zest logo\_An accion lab company\_Colour](https://blog.e-zest.com/hubfs/images/Logos%20with%20Tagline/Corporate/SVG/e-Zest%20logo_An%20accion%20lab%20company_Colour.svg "e-Zest logo_An accion lab company_Colour")](https://www.e-zest.com/) - [WORK](https://www.e-zest.com/our-work) - [SERVICES](https://www.e-zest.com/our-services) - [Product Engineering](https://www.e-zest.com/digital-product-engineering-services) - [Enterprise Data Services](https://www.e-zest.com/enterprise-data-services) - [Digital Commerce](https://www.e-zest.com/digital-commerce-services) - [Digital Operations](https://www.e-zest.com/digital-operations) - [Digital Consulting](https://www.e-zest.com/digital-transformation-consulting-services) - [Digital Experience Design](https://www.e-zest.com/digital-experience-design) - [INSIGHTS](https://blog.e-zest.com/) - [CAREERS](https://www.e-zest.com/careers) - [ENTERPRISE DATA SERVICES](https://www.e-zest.com/enterprise-data-services) - [GENERATIVE AI](https://www.e-zest.com/generative-ai) - [Healthcare](https://healthcare.e-zest.com) - [Contact Us](https://www.e-zest.com/contact-us) - ![Elevating Product Engineering with AI and ML](https://blog.e-zest.com/hubfs/Elevating%20Product%20Engineering%20with%20AI%20and%20ML.jpg) [BLOGS](https://blog.e-zest.com) #### Elevating Product Engineering with AI and ML As technology evolves and customer choices broaden, there is an increasing ... [Read more](https://blog.e-zest.com/elevating-product-engineering-with-ai-and-ml) - ![e-Zest – An Accion Labs Company gets Recognition as a Contender in the ISG Provider Lens™ Study on Digital Engineering Services 2024](https://blog.e-zest.com/hubfs/e-Zest%20%E2%80%93%20An%20Accion%20Labs%20Company%20-%20Gets%20Recognition%20as%20a%20Contender%20in%20the%20ISG%20Provider%20LensTM%20Study%20on%20Digital%20Engineering%20Services%202024.jpg) [NEWS](https://blog.e-zest.com/news) #### e-Zest – An Accion Labs Company gets Recognition as a Contender in the ISG Provider Lens™ Study on Digital Engineering Services 2024 We are delighted to announce that e-Zest – An Accion Labs Company has been ... [Read more](https://blog.e-zest.com/news/e-zest-an-accion-labs-company-gets-recognition-as-a-contender-in-the-isg-provider-lens-study-on-digital-engineering-services-2024) - ![e-Zest Solutions supports Digital Pune Mission](https://blog.e-zest.com/hubfs/blog-files/Digital%20Literacy%20Bus%20e-Zest.png) [CSR](https://blog.e-zest.com/csr) #### e-Zest Solutions supports Digital Pune Mission **Pune, India:** e-Zest Solutions, a leading digital technology innovation ... [Read more](https://blog.e-zest.com/csr/e-zest-solutions-supports-digital-pune-mission) - [Work](https://www.e-zest.com/our-work) - [Services](https://www.e-zest.com/our-services) - [Insights](https://blog.e-zest.com) - [Careers](https://www.e-zest.com/careers) - [Enterprise Data](https://www.e-zest.com/enterprise-data-services) - [Generative AI](https://www.e-zest.com/generative-ai) - [Innovations](https://www.e-zest.com/innovations) - [Healthcare](https://healthcare.e-zest.com) - [About](https://www.e-zest.com/about-us) - [Contact](https://www.e-zest.com/contact-us) - [Blog](https://blog.e-zest.com/) - [News](https://blog.e-zest.com/news) - [CSR](https://blog.e-zest.com/csr) - [![Linkedin Icon](https://blog.e-zest.com/hubfs/icons/linkedin_icon_white.svg)](https://www.linkedin.com/company/e-zest-solutions/) - [![Twitter Icon](https://blog.e-zest.com/hubfs/twitter-logo-silhouette%20(5).svg)](https://twitter.com/ezest) - [![Facebook Icon](https://blog.e-zest.com/hubfs/facebook-app-logo%20(4).svg)](https://www.facebook.com/61259256638) - [![Instagram Icon](https://blog.e-zest.com/hubfs/instagram-logo%20(4).svg)](https://www.instagram.com/ezestsolutions/) - [![Youtube Icon](https://blog.e-zest.com/hubfs/icons/youtube_icon_white.svg)](https://www.youtube.com/user/ezestcorporate) [![Go to top icon](https://blog.e-zest.com/hubfs/AA%20Assets/top%20button.svg)](https://blog.e-zest.com/workaround-for-ios-touch-device-issues#top) Hit enter to search or ESC to close Insights e-Zest members share technology ideas to foster digital transformation. - [Blog](https://blog.e-zest.com) - [Whitepaper](https://blog.e-zest.com/whitepaper) - [Playbook](https://blog.e-zest.com/playbook) - [News](https://blog.e-zest.com/news) - [Innovation](https://blog.e-zest.com/innovation) - [Media Kit](https://www.e-zest.com/media-kit) # Workaround for iOS touch device issues [Tushar Narwade](https://blog.e-zest.com/author/tushar-narwade) Feb 14, 2018 [iOS](https://blog.e-zest.com/topic/ios) [Touch devices](https://blog.e-zest.com/topic/touch-devices) - - - - 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. **Below CSS properties that are causing the issue in devices :** - :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. - - - ### Similar Blog [![App Transport Security: A Primer](https://blog.e-zest.com/hubfs/Capture-27.jpg) App Transport Security: A Primer “*App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure. Temporary exceptions can be ...* By Amey Jagtap Feb 17, 2016](https://blog.e-zest.com/app-transport-security-a-primer) [![Seven Biggest Mobile Trends in Play Right Now](https://blog.e-zest.com/hs-fs/file-3419269681-png/blog-files/contractiq.png) Seven Biggest Mobile Trends in Play Right Now A recent mobile development trends and price benchmark report by ContractIQ has thrown light into some interesting trends in the ... By Corporate May 19, 2015](https://blog.e-zest.com/seven-biggest-mobile-trends-in-play-right-now/) [The SCORM Chronicles | Episode: The Offline Challenge I am a developer. Things are a bit mundane sometimes in my life. Once in a while, I seek an adventure that challenges me to find ... By Abhishek Mishra Dec 02, 2014](https://blog.e-zest.com/the-scorm-chronicles-episode-the-offline-challenge/) [Tech Digest – Week 24, 2013 **New algorithm solves Cloud security issues** By Corporate Jun 14, 2013](https://blog.e-zest.com/tech-digest-week-24-2013/) [![Writing clean CSS](https://blog.e-zest.com/hubfs/ways-to-write-clean-css.png) Writing clean CSS Writing clean CSS is essential for readability and helps in maintaining the code. In order to write clean CSS here are few of the ... By Tushar Narwade Aug 17, 2017](https://blog.e-zest.com/writing-clean-css) [SEO Best Practices Search engine optimization (SEO) is usually a bunch of rules followed by website owners to improve site rankings in search ... By Tushar Narwade Mar 01, 2017](https://blog.e-zest.com/seo-best-practices) ## Helping Organizations Thrive in the Digital Age [Contact Us](https://www.e-zest.com/contact-us) - [About](https://www.e-zest.com/about-us) - [Services](https://www.e-zest.com/our-services) - [Work](https://www.e-zest.com/our-work) - [Insights](https://blog.e-zest.com/) - [Healthcare](https://healthcare.e-zest.com/) - [Accion Labs](https://www.accionlabs.com/) - - - - - - Dallas - Detroit - Hannover - Vienna - London - Pune © 2025 e-Zest Solutions - [Privacy Policy](https://www.e-zest.com/privacypolicy) - [Cookie Policy](https://www.e-zest.com/cookie-policy) Contact us Contact us e-Zest is a leading digital innovation partner for enterprises and technology companies that utilizes emerging technologies for creating engaging customers experiences. Being a customer-focused and technology-driven company, it always helps clients in crafting holistic business value for their software development efforts. It offers software development and consulting services for cloud computing, enterprise mobility, big data and analytics, user experience and digital commerce.