Links not working inside <li>

[ghost]

I'm looking for help as I'm stuck with links not working on mobile device (Safari, iPhone at least).

I'm looking to add links inside each cards ( < a > inside each li element). It seems to work on a computer, but not on a mobile device. The link is shown, you can tap it (click) but it doesn't send you to the destination, it's like it's not working.

I guess it's from the CSS animation or maybe modernizr but I'm really not an expert and I need your help !

Here is a link to the pen : https://codepen.io/imromain/pen/gwdRzo

[adenadoume]

Yup, am having exact same issue, trying to figure out how to make link work on touch devices...

Preparing coffee and going for a long night I guess :)

From my little knowledge I believe it has to do with a touchstart event setting the zindex property, link is in background in touch devices..

Any help much appreciated, amzing script btw :)

[ghost]

Ok! I have contacted a cool developer, and he said : "It's not the z-index, it looks like a touch event on mobile triggers a drag." If you have any idea ! Your help would be really appreciated.

[abinktidars]

yes, i was used "On Touch Event" in jquery ui can solving the problem to give links in stack (li)

[alexscloh]

any solution to fix it? i need a click link in each card

[talifa]

any idea?

[OneHedgehog]

Workaround: To add redirect on touchevent

Smth like this. Elem is your link in dom

elem.addEventListener("touchend",()=> { window.location.href = "https://www.google.com.ua" });

[OneHedgehog]

Also opened a pull request https://github.com/codrops/ElastiStack/pull/9/files

[talifa]

Unfortunately, the bug is still there.

[weirdo-o]

同样的问题，求大神解救

[weirdo-o]

给需要跳转的元素添加了touchend以后，滑动的时候碰到元素就会触发跳转，用户体验很差啊

[OneHedgehog]

The prev version of my workaround have some troubles. When you put some tags inside a tag, the target element is the last child tag. And, if it isn't a link, it obviosly doesn't have a href attr, so our redirect didn't work

Finally fix it in my next pull req: https://github.com/codrops/ElastiStack/pull/13/files

[talifa]

@OneHedgehog спааааааасибоооу

[OneHedgehog]

It seems like that issue can be closed :)