W3C home > Mailing lists > Public > whatwg@whatwg.org > December 2016

Re: [whatwg] sticky css hover state on touch devices

From: Ashley Sheridan <ash@ashleysheridan.co.uk>
Date: Tue, 06 Dec 2016 07:47:41 +0000
To: Zac Spitzer <zac.spitzer@gmail.com>,whatwg@whatwg.org
Message-ID: <6CC838DE-1636-40F9-85D7-011515C053BB@ashleysheridan.co.uk>


On 6 December 2016 05:24:59 GMT+00:00, Zac Spitzer <zac.spitzer@gmail.com> wrote:
>on touch devices, there is a problem with sticky hover states
>
>https://bugs.webkit.org/show_bug.cgi?id=158517
>https://bugs.chromium.org/p/chromium/issues/detail?id=370155
>
>one workaround it to clone, remove and re-insert the element
>http://stackoverflow.com/a/31691425
>
>my question is, should an element retain it's hover state when hidden?
>
>if it didn't, an easy workaround for this problem is to set
>display:none;
>and then display:block;...
>
>aka jquery $(el).hide().show()

Surely you're better off setting a focus state, as that takes priority (at least in all browsers where I've seen this problem.) The hover and focus states should be different as they're meant to visually indicate different things to the end user.

There are browsers out there with joint touch and mouse capabilities too (e.g. Surface, any touch screen added to desktop OS's, and Android with a mouse plugged in, etc) where you wouldn't want to break hover state like you propose.

Thanks,
Ash
Received on Tuesday, 6 December 2016 07:48:51 UTC

This archive was generated by hypermail 2.4.0 : Wednesday, 22 January 2020 17:00:40 UTC