IE 10 and Touch

[alexw-zz]

Using a default Wordpress Genesis theme implementation of Suckerfish and Superfish. Manually upgraded to 1.5.9, called in new hoverIntent.js.

Works fine with mouse/hover on IE, FF, Chrome, Safari. Win8/Win7

Works fine with touch methods on Chrome, Safari Firefox (edit, just tested, does work with FF and touch) on Win8/iOSx

Win8/IE 10, on Surface Pro tablet, the menus do not open unless you leave your finger pressed on the top level href. If you take your finger off, it immediately closes. If you leave it on too long - it triggers the "copy/paste" pop up in Win8/IE10. The menu stays open while the copy/paste dialog is up. Not useful, but it's happening.

Both metro and desktop versions of IE 10, for reference.

Tried using the sf-touchscreen.js from Drupal, didn't have any affect.

If I am missing something, please point me in right direction. If not, and it's a bug, have fun :). I sadly won't be any help, JS is not my thing.

[joeldbirch]

Hey Alex, I really appreciate the feedback. I'd love to fix this for the Surface, can you send me yours? Seriously though, it's going to be tricky to get hold of a test device. I just picked up a couple of Windows Phones on ebay to test with, but the Surface ain't cheap. I'll see what I can do.

Strange (but not surprising) that the Surface would ignore standard click events! I imagine I could try using MS's new "pointer events" to force it to behave.

Thanks again. Will fix it as soon as I am able.

[alexw-zz]

Yeah, not too many win8 touchscreen devices floating around, and less that are cheap enough to warrant a test device :).

If you feel like playing back and forth based on what you think could fix it, can set up a test environment somewhere, you do edit, I'll reload, test, let you know if it worked via IM, etc etc.

Either way, thanks for the quick response. I guess the IE guys will have to suck it up.

Off topic - IE 10 on a touch Win8 device is actually top of the pile right now as far as enjoyable user experience goes. Most don't even have pinch-zoom functionality. I have them all installed, and none flow as well as IE10 does, so I've been using it. First time in a decade.

[joeldbirch]

Thanks for the offer, that may come in useful. I'm thinking of seeing if I can strip out the regular events (focus, mouseenter, etc) and getting non-touch IE10 to work using MS pointer events. If I do, then maybe I'll get you to test that it works on the Surface.

It's interesting that you like the user experience of the Surface Pro. I've seen mixed reviews, but I really want to like it. Testing IE10 in a VM is a weird experience because sometimes I actually forget that it's IE. It feels like a real one! Hoping this new-MS vibe continues.

[alexw-zz]

Sure thing. Just let me know re: testing, anytime.

Re Surface Pro - 85 percent happy. Re ie on surface - 100% happy. They've tweaked it to work well with ie 8 and touch. I dig this set up so far because I can putz around with it on couch like an iPad at home. But when I travel for work I can fire up real programs, multitask, batch process images, etc. Its full real windows. Cuts my device purchases and bag weight in half :).

-------- Original Message -------- From: joeldbirch notifications@github.com Sent: Thu Feb 28 00:06:01 EST 2013 To: joeldbirch/superfish superfish@noreply.github.com Cc: alexw alexweiner@2005solutions.com Subject: Re: [superfish] IE 10 and Touch (#10)

Thanks for the offer, that may come in useful. I'm thinking of seeing if I can strip out the regular events (focus, mouseenter, etc) and getting non-touch IE10 to work using MS pointer events. If I do, then maybe I'll get you to test that it works on the Surface.

It's interesting that you like the user experience of the Surface Pro. I've seen mixed reviews, but I really want to like it. Testing IE10 in a VM is a weird experience because sometimes I actually forget that it's IE. It feels like a real one! Hoping this new-MS vibe continues.

---

Reply to this email directly or view it on GitHub: https://github.com/joeldbirch/superfish/issues/10#issuecomment-14217087

Sent from my Android phone with K-9 Mail. Please excuse my brevity.

[joeldbirch]

Hey Alex,

I have done a bit of experimenting and prepared a test for you to try whenever you get chance. Basically, it seems that IE10 doesn't support the touchstart event which is what I use to cancel the links from being followed on touch devices until their submenus are open. In this test I'm using MSPointerDown instead, when available. Hope it helps!

Here's the IE10 for Surface test page. Thanks.

[alexw-zz]

Wow, fast work, thanks.

The menus drop, stay open. Already ahead of where it was.

However, it seems very finicky with following the text href if it's a parent. Sometimes it follows the href before the menu fully drops, sometimes it just triggers the menu opening. I can't find a pattern to what's making that happen, any particular way of clicking or clicking in any particular area of the element.

Only thing that might be a pattern is that if I "lightly" tap the arrow icon, it works as a drop down, if i hard tap it , it works as an immediate href click. Haven't been able to control my finger well enough to consistently replicate that.

Hope that helps!

[joeldbirch]

Thanks again for this. I guess it's progress. Really appreciate the little clues you included in describing the behaviour. My method is that MSPointerDown (which should happen prior to any click events) renders the link un-followable until its submenu is fully open. When it doesn't work, the only thing I can think is that a click event is happening before MSPointerDown, which, grrrr, shouldn't happen.

I had mixed reports from a couple of other people too:

• @reybango says: "works on IE10 on my touchscreen monitor"
• @stowball says: "Works on WP8, not WP7.5"

I have altered it slightly (here's an updated test) but I've probably gone as far as I can without a test device. Reluctantly considering buying a Surface RT (the Pro isn't available in Australia, yet), although this device-buying lark is getting a bit extravagant for an Open Source project.

Thanks again.

[alexw-zz]

I am still having the same issues with that one. Focused, light clicks open the menu and function normally, half the time. But if it’s a “normal” finger touch triggers href.

I’m thinking if top level are place holder items, and you only have one level deep, this would work.

If someone else mentioned it fully worked, may be an issue with the Surface’s particular screen tech. And then, the Pro and RT have different screens, dimensions and tech I think. Pro is very dense, 1920 x 1080 on 10.1 inches. If that’s the case, not much can be done.

If there is a demo model somewhere, I’d at least go in and play for a bit first, before buying. Maybe get a test page set up which prints/saves the events happening in real time below the example so you can just load it up and watch it while you play.

I can contribute to an Surface fund for ya, I appreciate the effort, but at the moment I don’t think I could cover the whole thing.

Thanks for all the work, if you want me to test anything else just let me know!

-- Alex

From: joeldbirch Sent: Friday, March 01, 2013 3:05 AM To: joeldbirch/superfish Cc: alexw Subject: Re: [superfish] IE 10 and Touch (#10)

Thanks again for this. I guess it's progress. Really appreciate the little clues you included in describing the behaviour. My method is that MSPointerDown (which should happen prior to any click events) renders the link un-followable until its submenu is fully open. When it doesn't work, the only thing I can think is that a click event is happening before MSPointerDown, which, grrrr, shouldn't happen.

I had mixed reports from a couple of other people too:

a.. @reybango says: "works on IE10 on my touchscreen monitor" b.. @stowball says: "Works on WP8, not WP7.5" I have altered it slightly (here's an updated test but I've probably gone as far as I can without a test device. Reluctantly considering buying a Surface RT (the Pro isn't available in Australia, yet), although this device-buying lark is getting a bit extravagant for an Open Source project.

Thanks again.

— Reply to this email directly or view it on GitHub.

[joeldbirch]

Hey Alex, I bought a Surface RT and worked on this all day. Getting Microsofts new Pointer Events to work like other touch devices was causing a lot of forked code until I realised I should let go and do it the way MS obviously envisions how this should work. So now it works great but behaves differently to other touch devices. You touch, hold and swipe around to navigate, then lift your finger off to follow the link under it. I'm sure Surface users will soon get used to it - especially as other plugins start supporting Pointer Events.

I have released version 1.5.10. Try out the new swipey goodness!

Now: anyone want to buy a barely used Surface RT? ;)

[alexw-zz]

Hey Joel, that's much better! Once i cleared the cache and tried it how you described it worked like a charm. I think this is good for my purposes.

I can see folks who have deep sub-menus not digging it because it removes the ability to open the menu and then pause, take in what's been presented, then choose the next menu, etc. This forces you to be pro-active with your finger the entire time. If you step back to look at a sub menu, you open that top level link.

But, seems like that is Microsoft's doing, not yours. Once one knows how it works it will get the job done.

I appreciate your time and effort on this, totally more than what I was expecting. Gonna go hit that donate button. Later!

[joeldbirch]

Too kind, man! That was really generous of you, thanks. I've been wondering if that button still works ;)

I know what you mean about having to keep your finger down. Could become a bit of a…wait for it…drag? It's kind of cool for shallower nested menus though, once you get the hang of it.

You could set Superfish's delay option to, like, 20 seconds or something, which would keep the submenus open but require an action to close them. Worth considering.

I may this issue for now, but I'll keep thinking of ways to make this more awesome. Please keep sharing your thoughts, too. Thanks again.

[joeldbirch]

I clearly didn't close this issue. :)

I've been thinking about how the menu has different touch behaviour in IE10, and I'm not really sold on it. I have developed a version that works exactly like other touch browsers. Do you think I should make that version 1.5.11? I'm not sure the current behaviour has any qualities that would trump having a consistent experience across all touch browsers.

Do you agree, Alex? It's currently 4am here, but if you are interested I can get a test page up tomorrow.

Cheers Joel.

[joeldbirch]

Actually, here is the new test page. I hope you like it as I'm much preferring it over the other behaviour.

[alexw-zz]

Just checked it out, I think that works way better. I was training myself to use the new system with a 1200 ms delay, but this functions perfectly. Should be universal if possible, you're right. Even if people use a win8 touch device, and learn different methods for the interface, they will still (most likely) have past interaction with android and ios browsers, or the mouse on desktop. Touch to mimic mouse hover seems to be a natural first reaction. So keeping it uniform I think is good.

[joeldbirch]

Great! I have just released v1.5.11. Thanks again for your input, Alex.