When performing a tap, the :hover-pseudoclass is not set on the corresponding DOM-element

Issue #7150566 • Assigned to Bruce L.


Apr 8, 2016
This issue is public.
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

It’s a common technique on the web to create pure CSS dropdown-menues by using the :hover-pseudoclass. Have a look at this example:
Expected behavior: After a tap the dropdown should appear and stay on screen.
Current behavior: After a tap the dropdown does not appear.
It works as expected on desktop-browsers, as well as on iOS and Android devices. The latter ones set and retain the :hover-pseudoclass together with first tap on the dropdown-menu. Microsoft Edge behaves buggy here. The :hover doesn’t seem to be set after tapping the dropdown-element and the menu doesn’t show up.
Note: The buggy behavior only occurs when using (finger) touch. Using the mouse or the Surface-stylus everything works s expected, because these input methods natively support a hover-effect.


0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Sermet I.”

      Changed Assigned To from “Sermet I.” to “Ted D.”

      Changed Status to “Confirmed”

      Changed Status from “Confirmed”

      Changed Assigned To to “Sermet I.”

    • We are still investigating an approach to make this behavior better. However, for this specific example an easy workaround is to add the aria-haspopup="true" attribute to the top level menu element. That approach will not work for every design pattern, but should work fine for most and be interoperable.

    • Microsoft Edge Team

      Changed Assigned To from “Sermet I.” to “Bruce L.”

    You need to sign in to your Microsoft account to add a comment.

    Sign in