Hovering over descendant SVG element fires mouseleave event at ancestor

Confirmed Issue #7787318 • Assigned to Andrew B.

Details

Author
Chris R.
Created
Jun 4, 2016
Privacy
This issue is public.
Found in
  • Microsoft Edge
  • Firefox
Found in build #
13.10586
Reports
Reported by 4 people

Sign in to watch or report this issue.

Steps to reproduce

  1. Open http://codepen.io/cvrebert/pen/RajVGb in Edge.
  2. Hover the mouse pointer over a black square.
  3. Hover over the white area between the black squares.
  4. (Optionally) repeat steps 2 & 3 multiple times.

Actual results:
When hovering over the white area, a tooltip is shown.
When hovering over a black area, the tooltip is hidden.
This happens because mouseleave events are dispatched (supposedly indicating that the pointer has left the blue square)
whenever the pointer hovers over one of the black squares.

Expected results:
When hovering anywhere (including the black squares) within the bounds of the blue square, a tooltip should be shown and should remain shown until the pointer leaves the blue square.
This is the behavior exhibited by Chrome and Safari.
I have no idea what the specs mandate here in the context of SVG-HTML interaction.

Original Bootstrap bug: https://github.com/twbs/bootstrap/issues/19670

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Ibrahim O.”

      Changed Assigned To to “Sermet I.”

      Changed Assigned To to “Rick J.”

      Changed Assigned To to “Sermet I.”

      Changed Assigned To from “Sermet I.” to “Alexander W.”

      Changed Status to “Confirmed”

    • I’ve recently been testing our web services’ compatibility with Edge and I noticed this exact bug when testing our clickable SVG icons. The icons are hidden/shown when the mouse enters a certain area, and are perfectly predictable in other browsers. In Edge, once the SVG is hovered over, a mouse-leave event is fired in the hoverable area, causing interference between the hoverable area and the SVG causing the SVG to be hard to click and shifty.

    • Microsoft Edge Team

      Changed Assigned To from “Alexander W.” to “Andrew B.”

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

    Sign in