I currently have around 20 images show up one after another. All images are basically links to pages so on clicking any image the user is taken to a specific page. The code works fine with regular devices and even on android and windows mobiles. the issue i face is only with iphone. Here is how the issue occurs, when a user is scrolling sometimes even a light tap around the image results in user being redirect to the link. What I want is if there is some way to find out if user really clicked on the image or they were just scrolling the page? I tried a few solutions like adding prevent default with delay on touchstart/touchend but nothing works. If I add delays then many times user has to click/tap multiple times to go to the link. I searched everywhere and find lots of users facing this issue, so are there any known solutions? Thanks in advance.
Ok I think I found a workaround for this issue. What I have done is activated click only if the image is fully inside the viewport so if only part of the image is on the viewport then it wont activate the click. So 9/10 times it works ok now unless ofcourse the full image is in the viewport and the user is still scrolling then once in a while this workaround does not work. So any better solution?
Hi @jaagare, are the links conventional links or are they enabled by some JavaScript functionality ‘onclick’ or ‘onmousedown’?
Also it may be possible to overcome this by setting some kind of CSS hover effect on the links. Touch devices will detect these and apply them on first tap and then redirect to the link on the second tap.
Hope this helps, if not it would be useful to take a look at your code.
All the best,
Andres
Hi @Andres_Vaquero. Thanks for your reply. Yes I do have on hover add a hover class css for each image. On hover it shows the image caption over the image. But the main issue I face is only with iPhone. When scrolling it automatically takes it as a click and redirects it to that page. While in Android and Windows Phone nothing happens when scroll is in progress. Only if I tap on the device it counts it as a click and correctly redirects to url when a user taps. I am not able to figure out a way to tell if a user is currently scrolling or has tapped on the device. Thanks
How about my first question quoted above?
Also have you checked that there are no JavaScript errors on the iphone?
You’re welcome…
No I dont have mousedown but on mouseenter I add the caption class over the image and mouseleave remove the caption. No js/jquery errors.
I would suggest trying to rely as little as possible on those kind of mechanisms being triggered via JavaScript as you can be bypassing default device functionality by doing that. Specially when you clearly have at your disposal non-JavaScript methods to achieve that kind of thing. In this case I’m referring to CSS :hover selector. Check it out and maybe get rid of the mousenter listener. That might get you in the right direction.
Hope it helps and best of luck
P.D. you still did not answer my first question, are they conventional links with HTML a href… tags?
Ok. Let me give it a try. Yes its just a simple a href tag with image inside the a href so the entire image clicks.
What I finally did is this : 1st click only show caption. Second click redirect to page. It works perfect across all devices now.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.