iPad styled link bug

Forum Moderators: not2easy

Message Too Old, No Replies

iPad styled link bug

D3mon

10:11 am on Jun 30, 2015 (gmt 0)

Hi guys,

This bug has me stumped: When browsing my site on an iPad, the CSS styled links to the product pages just animate when touched but don't link through to the product page. I know there are some CSS animations going on there, but the behaviour seems to work fine everywhere else, even the iPhone, but I just can't seem to nail it.

Thanks in advance for any help/suggestions. :)

[edited by: not2easy at 7:27 pm (utc) on Aug 16, 2015]
[edit reason] Charter/TOS [/edit]

Paul_o_b

12:56 pm on Jun 30, 2015 (gmt 0)

Hi,

It doesn't work on my ipad either and I have noticed before that some combinations of transitions stop llnks being followed in the ipad.

This short demo exhibits the problem.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
a {
-webkit-transform: rotate(-3deg);
display:block;
width:150px;
height:100px;
background:red;
-webkit-transition: .3s;
}
a:hover {
-webkit-transform: scale(1.3);
}
</style>
</head>

<body>
<p><a href="http://www.google.com">test</a></p>
</body>
</html>

I couldn't see a solution other than using media queries to remove the transition from the rule above or the hover rule.

D3mon

1:07 pm on Jun 30, 2015 (gmt 0)

Thanks, Paul. That certainly looks to be the issue. At least I can target my efforts on a workaround rather than a problem with my CSS. :)