Submenus links don't work with touch in IE and Edge

[KillerBoogie]

What should happen?

clicking a submenu item on touch devices with IE and Edge should open the link.

What happens instead?

I'm working on a MS Surface Pro. When using Edge or IE with touch the submenus don't work. They work clicking with the mouse, but not with touch. When I tap a menu item the submenu appears. I tap on a submenu item, the item shows quickly to be selected, then the menu closes, but the page doesn't load. Touch in iPad and iPhone works. Touch in Chrome and Firefox works, too.
The same happens on foundation.zurb.com. I can't navigate the Zurb site using touch in IE or Edge.

Possible Solution

Test Case and/or Steps to Reproduce

Test Case:
Go to Zurb.com, open a menu and tap on a subitem.

How to reproduce:

1. Use IE or Edge on a touch device and tab on a submenu -> nothing happens

Context

User can't navigate website at all.

Your Environment

• Foundation version(s) used:
  v6.4.3.

• Browser(s) name and version(s):
  Microsoft Edge 42.17134.1.0, Microsoft EdgeHTML 17.17134
  Microsoft Internet Explorer 11.165.17134.0

• Operating System and version (desktop or mobile):
  Windows 10 Desktop [Version 10.0.17134.191]

Checklist (all required):

• I have read and follow the CONTRIBUTING.md document.
• There are no other issues similar to this one.
• The issue title is descriptive.
• The template is correctly filled.

[MichaelSmeal]

Hello,

I am experiencing this same issue.

My current version of Foundation is 6.3.1

Hope to hear some news on this one.

Thank you

[ncoden]

Hi @KillerBoogie,

Unfortunally, I am not able to test your issue, I do not have a Windows touch device, and browserstack only provide touch devices with iOS or Android.

There is 3 ways you can help us with this:

• Could you try to reproduce the issue with others devices ?
• Could you check if there is any error logged in the console ? (instructions)
• Can you reproduce the issue with the latest version of Foundation v6.5.0-rc.2 ? You can test it on the Foundation documentation: https://foundation.zurb.com/sites/docs/dropdown-menu.html

Poke @DanielRuf. Does your company have Windows touch devices?

[MichaelSmeal]

Hi @ncoden,

I can respond to how this is affecting my build. Currently my build is using Foundation 6.3.1. When I try to access our company website, as well as the Foundation for Sites Docs page, I am experiencing the same issue.

This is only being affected on touch screen devices that run Microsoft Edge as well as Internet Explorer. The mouse functionality works correctly. It is only when you use touch movement on the screen.

Thank you

[DanielRuf]

Poke @DanielRuf. Does your company have Windows touch devices?

Yes we have a Surface.

[ncoden]

Yes we have a Surface.

Great. Will you be able to test this issue ?

[MichaelSmeal]

@DanielRuf @ncoden Hello good sirs,

Were you able dig into this issue by any chance?

[KillerBoogie]

Hi, I have been on the road and just came back. Any news on that issue?

• I don't have any other windows touch devices besides the two surface computers, but I doubt it is a surface issue when the browser is used.
• I could not see any errors in the console
• I'm sorry I don't have time to test this on a different version of foundation. But since it is not working on the foundation website either, you have a great test case ;-)

Marcus

[ncoden]

@KillerBoogie The Foundation website (https://foundation.zurb.com) uses an older version of Foundation. Did you tested the DropdownMenus in the the Foundation documentation (https://foundation.zurb.com/sites/docs/dropdown-menu.html), which uses the latest version (v6.5.0-rc.2) ?

[KillerBoogie]

I tried to test the DropdownMenu in the foundation documentation, but the sample menus have no action, so I can't test it. The problem id that submenus unfold, but the link is not called.

[ncoden]

@KillerBoogie Here is a Codepen with Foundation v6.5.0-rc.2 and links in all the items of the menu (pointing to https://codepen.io): https://codepen.io/ncoden/pen/qMrNzN

[KillerBoogie]

I checked the Codepen page and the actual version has the same issue. Clicking with the mouse opens the link, using touch doesn't open the link.
Marcus

[DanielRuf]

Not sure if this is related to tap / ontouchstart and just click.

https://github.com/zurb/foundation-sites/blob/develop/js/foundation.dropdownMenu.js#L133

I did not have the time to test this further or debug this as we are currently in the last sprint of a big project at work.

[ncoden]

Not sure if this is related to tap / ontouchstart and just click.

Working in Chrome, Firefox, IE/Edge and others touch devices, but not IE/Edge touch devices: it really sounds like a browser bug to me, releated to the Touch API on IE/Edge.

• https://stackoverflow.com/questions/33300962/touch-api-e-g-touchstart-not-working-in-ms-edge
• Turn on Touch Events in Edge MicrosoftEdge/WebAppsDocs#39
• https://gist.github.com/redoPop/9050999cebcd7e50934a

[KillerBoogie]

The submenu with touch does not work in Edge AND IE. Submenu touch works well on any other website, and also with Bootstrap menus.

[DanielRuf]

I've at least seen that depending on the current input the number of touches / touch points changes.

https://github.com/jquery/PEP and other polyfills might help here.

https://stackoverflow.com/questions/27104178/how-to-detect-touch-screen-in-windows-8-1-on-internet-explorer-11

MaxTouchPoints > 0

[DanielRuf]

Working in Chrome, Firefox, IE/Edge and others touch devices, but not Edge touch devices: it really sounds like a browser bug to me, releated to the Touch API on IE/Edge.

I don't think so. It depends on the current input. IE11 and Edge provide all inputs (mouse / keyboard / touch) at the same time. Sometimes only the current number of touch points will tell if it is really a touch event.

https://github.com/jquery/PEP/blob/3b041adf74f1077932b15e0599d8131cc7dc6acc/src/platform-events.js

[ncoden]

I don't think so. It depends on the current input

Yeah I actually meant "something wrong with IE/Edge on touch devices", like using vendor events (MSPointerMove, ...) instead of the Touch API.

[KillerBoogie]

Any news about the problem?

I was able to test it on a Medion Win 10 Touch computer. It doesn't work either. So it must be a general windows touch issue.

[KillerBoogie]

Still no news?

[DanielRuf]

Unfortunately I do not have the time to test here as I currently work on a few big client projects (which do not use Foundation or Sass at all).

[MichaelSmeal]

Hi All,

Have you had a chance to take a look at this issue?

Thank you!

[Nokhal]

https://www.theverge.com/2019/4/8/18300077/microsoft-edge-chromium-canary-development-release-download

Edge will eventually use the same rendering engine as Chrome.
For now, a link prompting touch-users to download Firefox/Chrome is the best fix.

[DanielRuf]

Not sure how this is relevant.

[Nokhal]

It's a browser bug related to how edgeHtml is rendering content, with microsoft phasing out edgeHtml for edge in favor of a chromium derivative. (ETA next autumn).
This mean that if you fix it now, you will have to remove the "fix" next autumn, as Microsoft is forcing users to properly update their computers now.

[DanielRuf]

So far there is no fix / PR related to this. Also IE is still supported by Foundation Sites and by Microsoft.