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.
That's a bummer Window Phone 8 browser doesn't do that... You might have to write some JavaScript that deals with tap events. Like when you tap it applies a class of "hover" and you reveal the menu with that class.
Thanks for the quick reply. I'm afraid I will end up JavaScripting this (just like fixing oh so many other issues for IE sigh) just like you're suggesting.
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.
[Edit]
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 ;)
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.
That's a bummer Window Phone 8 browser doesn't do that... You might have to write some JavaScript that deals with tap events. Like when you tap it applies a class of "hover" and you reveal the menu with that class.
Also, modenizr has a test for touch events, so you could write specific event handlers for that stuff.
Thanks for the quick reply. I'm afraid I will end up JavaScripting this (just like fixing oh so many other issues for IE sigh) just like you're suggesting.
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.
[Edit] 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.
Hey Ixolite,
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 ;)