Being a happy owner of a new Windows Phone 8 device I stumbled upon a major issue with mobile IE10. Namely, and more precisely, the problem lies with how IE10 handles :hover events with touch input.
All other mobile browser do the same – tap once to activate the :hover event, tap second time to interact with the :hover. This works nice, apart from the little iOS issue of not being able to close a :hover other than clicking some link, however that is not how IE10 works. IE10 treats :hovers like in desktop, mouse based environment – you cannot activate :hover and keep it in that state to interact with it further. That means that any navigational elements that rely on showing you additional options on :hover won’t work with touch operated IE10.
My question is – is there any elegant solution to make the :hover work like in all other mobile, touch operated browsers? Tap to active the :hover event and keep it up until another action is taken by the user?
I’d like to be able to provide navigation for touch IE10 without re-doing whole nav components of the page to address this issue.
In general, just totally avoid core functionality that is only shown on :hover.
In mobile webkit you are right, if the element has a :hover (but no href) it will stay in it’s :hover state after you tap it once.
I do like the :hover dropdowns very much though since they are so elegant and compact, simple markup and CSS. I know I shouldn’t use :hover for interactions where touch interfaces are concerned, however that was not an issue if those events were tied to button-like page elements, so users knew there is some action behind them.
Unfortunately this ‘broken’ behaviour of IE10 is not limited to Windows Phone, it is also present on tablet/desktop when using touch interface instead of mouse and keyboard. While it may be correct as far as standards are concerned, it is certainly not what we are used to and not how every other browser works with touch.
I probably should have mentioned that we work with very script-heavy pages so we tend to avoid introducing additional scripts whenever possible. One of the reasons we went with CSS only dropdown.
I see your point. As a mobile user, I figured how to overcome this issue. Usually if you touch or tap the :hoverable element, it will be treated as a click. So I touch+drag away from the element, so that it get focused which is a :hover event and will show the dropdown menu. Hope this help you in navigating on mobile devices although its not a fix ;)
As advocates of standards (and not browsers) we ought to be getting behind proper implementation. Implementing :hover as a toggle, rather than momentary change in state, is fundamentally incorrect. Internet Explorer 10 ought to be praised for *not* following along with broken implementations.
It’s our job, as the developers, to deliver an experience consistent with what is expected. You cannot *hover* on a mobile device, and as such an alternative approach should be taken. Many accessibility experts would argue that revealing important information on :hover is a bad practice entirely. IE may be at fault in many cases, but this isn’t one of them.
I agree with your remark. It’s not good to follow something wrong because other implementers did that. Just look at a long an confusing history of iOS Sarari before they got media queries right.
The problem is that IE10 transports the same behaviour to its desktop and modern implementation. A li:hover will not work in either browser. It is required to dumb it down to IE9.
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".