CODEWITHSUNDEEP
ioscsshovertouch
Ian Steffy
Ian Steffy

Reputation: 1234

:hover on ios mobile devices turns into double-touch instead of hover

First off, this is not a clone of: iPad/iPhone hover problem causes the user to double click a link because I want an answer that is purely CSS. All of the answers in this link require js or jQuery and the one CSS answer involves background images. I'm trying to change the opacity and that's it.

CSS wants to gear itself towards the mobile revolution yet every solution I see for a simple 'touchDown'(aka touch-hover) creating a hover effect requires javascript or jQuery.

Here's some simple code to illustrate what I mean:

.btn {
  border-radius: 5px;
  display: block;
  opacity: 1; <--from
  background: red;
  text-align: center;
  line-height: 40px;
  font-weight: bold;
  &:hover {
    opacity:.7; <--to
    transition: opacity .2s ease-out; <--fun fade animation :)
    -moz-transition: opacity .2s ease-out;
    -webkit-transition: opacity .2s ease-out;
    -o-transition: opacity .2s ease-out;
  }
}

Tested in Chrome & Safari

Upvotes: 11

Views: 16866

Answers (3)

stevec
stevec

Reputation: 53017

TL;DR: don't rely on hover to reveal things

From the source recommended in @ihodonald's answer also simply recommends not using hover at all:

It’s probably best to just not rely on hover to reveal anything. The tech to work around it isn’t quite there yet.

And from Trend Walton's article:

Ultimately, I think seeing hover states fade away will make the web a better place. There never has been any substitute for concise content, clear interaction, and simple design. If we focus on core elements that make browsing the web great, our sites will function properly no matter how people use them.

Upvotes: 0

imgnx
imgnx

Reputation: 789

Use the touchstart event instead of click on touchscreen devices. This example fixes the issue for iPhone and iPad.

if (
  navigator.userAgent.match(/iPhone/i) ||
  navigator.userAgent.match(/iPod/i)
) {
  // iPhone double-click polyfill
  $(document).on("touchstart", ".btn-that-does-something", function (e) {
    e.preventDefault();
    doSomething(this);
  });
  $(document).on("click", ".btn-that-does-something", function (e) {
    // no-op
    e.preventDefault();
  });
} else {
  $(document).on("click", ".btn-that-does-something", function (e) {
    e.preventDefault();
    doSomething(this);
  });
}

Upvotes: 0

Simon E.
Simon E.

Reputation: 58600

iOS will not trigger a link click event on the first tap if the :hover state either:

  • Has a CSS transition animation
  • Reveals child content (such as a submenu, tooltip or ::before/::after element)

In both cases the first tap will trigger the :hover state and a second tap will trigger the link (or click event).

If you remove the animation or the child elements you should get it to trigger within a single tap.

This great article from CSS Tricks digs a bit deeper into the issue:
The Annoying Mobile Double-Tap Link Issue

Upvotes: 24

Related Questions