CODEWITHSUNDEEP
htmlioscss
Tom
Tom

Reputation: 734

CSS opacity and transition break hyperlink on mobile device (iOS)

I have a website with an image that redirects a user to another page (hyperlink). When you hover over the image, its opacity goes down to 50% using opacity and transition.

This works fine on a desktop, but on my iPhone (iOS 8) in Safari this is bugged. When you tap on the image, its opacity goes down but it does not register the touch (click). You have to tap the image again in order to make the hyperlink work and to be redirected.

This is my stylesheet:

a img {
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity 250ms ease-in-out;
    transition: opacity 250ms ease-in-out;
}

a img:hover {
    opacity: 0.5;
    visibility: visible;
}

I have searched for similar questions on SO and Google, but none of the answers did it for me. For most, adding visibility: visible; seemed to do the trick, but not for me. It has no effect whatsoever. And as you can see it is in my CSS. (or I am doing something wrong here...)

I'll take any help I can, but I'd prefer some crafty CSS fix, and a way that avoids making platform-specific stylesheets.

PS. I know the hover is pointless on a touch device; this is merely a feature for desktop users, but I just don't want it to mess up a basic functionality on a mobile device.

Upvotes: 1

Views: 691

Answers (1)

ralph.m
ralph.m

Reputation: 14345

One option is simply to feed those styles only to larger screens, via a media query. E.g.

@media only screen and (min-width: 30em) {
  a img {
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity 250ms ease-in-out;
    transition: opacity 250ms ease-in-out;
  }

  a img:hover {
    opacity: 0.5;
    visibility: visible;
  }
}

Upvotes: 1

Related Questions