2005828 - Mouseleave events do not fire for SVG elements when their display is set to 'none' until a user initiated mousemove is performed

Status: UNCONFIRMED

(Core :: DOM: Events, defect)

Description

[Tristan Fellows]

Attachment: Basic HTML example for displaying the issue

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:146.0) Gecko/20100101 Firefox/146.0

Steps to reproduce:

• Create a polygon inside an SVG.
• Enter it with the mouse and a 'mouseenter' event is triggered.
• Set visibility of polygon to 'none' (e.g. with a 'click' event.)

Actual results:

• No 'mouseleave' event is initially triggered.
• When the mouse is moved slightly, the 'mouseleave' event is triggered.

You move the mouse to the polygon, and get a 'mouseenter' event, set visibility of the polygon to 'none', and as long as the mouse is not moved at all, the 'mouseleave' event will never be triggered.

Expected results:

The 'mouseleave' event should trigger as soon as the visibility of the element that it has entered is changed to 'none'. This would be consistent with non SVG elements.

Comment 1

[Tristan Fellows]

There are some extra nuances that might be useful to know about:

• In my testing, manually triggering a 'mousemove' event on the document does not then trigger the expected 'mouseleave', it has to be user initiated.
• Interestingly, updating the body's cursor style does result in the expected 'mouseleave' event being triggered (this is the hack solution I am using, see below.)

// Running this after setting the SVG element to visibility 'none'
// will result in a 'mouseleave' event for that SVG element.
const originalStyle = document.body.style.cursor
document.body.style.cursor = 'none'
setTimeout(() => { document.body.style.cursor = originalStyle }, 0)

Comment 2

[Tristan Fellows]

I imagine that it maybe someone's opinion that this is not a true 'mouseleave' event and this is therefore expected behavour. If that is the case, then these points should be considered:

• All other non SVG elements that I have tested (div/span/img) do send the 'mouseleave' event as soon as they are set to visible 'none'.
• It is odd that moving the mouse after the SVG element's visibility is 'none' results in the 'mouseleave' event being triggered.
  • An element with no visibility can not send a 'mouseenter' event, so I cannot see why it should 'mouseleave' either.
  • The 'mouseleave' event happens with <any> user initiated mouse movement, even if the mouse remains in the area where the element resides.
• Changing the cursor style should not result in the 'mouseleave' event being triggered.

Comment 3

[Tristan Fellows]

Attachment: Demonstration video of mouseleave events not always firing for SVG elements

Comment 4

[Tristan Fellows]

Attachment: Troubleshooting information from about:support