↵

Disabling hover interaction on iOS for better UX(medium.com)

over 8 years ago from Bennett Wong, Senior UX at BT Financial Group

  • Grzegorz CiwoniukGrzegorz Ciwoniuk, over 8 years ago

    Unfortunately detecting "ontouchstart" is not always a right approach. There are some "desktop" devices with touch screens (like my own Yoga 13).

    0 points
    • Bennett WongBennett Wong, over 8 years ago (edited over 8 years ago )

      Well, as long as there are different devices there will never be a universally ubiquitous experience, but you can cover most use cases, including hybrid touch devices, by combining ontouchstart with click events (or the modernizr class with media queries).

      I guess that's why the title says iOS? I'm assuming there'd still be a large amount of front-end devs looking for just that.

      0 points
      • Grzegorz CiwoniukGrzegorz Ciwoniuk, over 8 years ago

        I know and understand your point, and my point is: do not make assumptions. (and your samples will affect not only iOS browsers)

        0 points
    • Ryan DeBeasi, over 8 years ago (edited over 8 years ago )

      I hate to be Captain Buzzkill, but technically Modernizr.touch and ontouchstart indicate support for touch events, not necessarily a touch screen. There are lots of cases where the user isn't using a touchscreen, but those properties are true anyway. More info: https://github.com/Modernizr/Modernizr/issues/548

      This is admittedly a pretty lame limitation. The good news is that with CSS4, you'll be able to use media queries to see whether the user's input device supports hover. Until then, styling stuff based on Modernizr.touch will work most of the time, but be prepared for some false positives.

      1 point
      • Grzegorz CiwoniukGrzegorz Ciwoniuk, over 8 years ago

        Exactly my point.

        0 points
      • Bennett WongBennett Wong, over 8 years ago (edited over 8 years ago )

        Again, with hybrid screens, most use cases can be worked around even by combining the .no-touch class with media queries and combining the touch API JS with click events - tell me a device that you use or can think of on which this wouldn't work and I can probably think of a workaround. Unless it's a Palm Pre with Web OS.

        Also, the title is disabling hover for iOS, so technically there's no problem with those methods for that.

        0 points