So, quite recently I've been working on a website that was given me to improve and make responsive, and one of the issues that I've been faced with is that there are many elements that are clickable, with a mixture of CSS and jQuery effects for hover states.
Now, firstly I'd prefer all of these hover states to be CSS, but the main issue I'm having is that on these hover states, certain elements are changing display
and visibility
css properties. I did some reading, and apparently if this is the case, on touchscreen iOS devices, this causes the first 'touch' to force the hover state, and then a second click is needed to actually click the element.
I'm trying to find a solution that doesn't require lots of markup and styling changes. Preferably a fix harnessing jQuery/JavaScript would be good.
I've tried the following:
$(document).ready(function() {
$('a').on('click touchend', function(e) {
var el = $(this);
var link = el.attr('href');
window.location = link;
});
});
However, this has issues when the user holds their finger down on a clickable element, and drags the page to scroll. When they release their finger after dragging, the window.location
is still changed.
I'll add a jsFiddle later if necessary.
Thanks in advance.
EDIT:
Here's a jsFiddle that shows the issue. http://jsfiddle.net/0bj3uxap/4/ If you tap one of the blocks, you'll see it shows the hover state, you then need to tap again to actually fire the click event.
It seems to happen when an element is hidden, and then the hover state shows the element.
On supported iPhone models, you can prevent touches on the display from waking iPhone. Go to Settings > Accessibility > Touch, then turn off Tap to Wake.
Question: Q: i have to double tap everything Answer: A: Sounds like you have VoiceOver (one of the accessibility features) 'on'. Try triple-clicking the home button and see if that turns it off, and if it does you can then change what a triple-click does via Settings > General > Accessibility > Triple-Click Home.
Looks like I found a solution.
https://github.com/ftlabs/fastclick
FastClick fixes this issue, and removes the 300ms delay issue with some mobile browsers.
Just include the library in <script>
tags, and then initiate it using jQuery, or whatever you prefer:
$(document).ready(function() {
FastClick.attach(document.body);
});
Just to explain briefly why the issue occurs:
When an element is hidden, for example when it has a CSS property of any of the following:
display: none;
opacity: 0;
visibility: hidden;
And the hover state of the hidden element then shows the element, iOS doesn't fire a click event on the first touch, it forces the hover state (to show the element). The user then needs to touch the element again for a click event to fire.
I see why this has been added, but I think I'd rather iOS didn't do this, and then developers would just need to tailor their websites to not hide content that coud be vital.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With