1814876 - overlay scrollbar interferes with mouseenter, mouseleave and mousemove

Status: NEW

(Core :: DOM: Events, defect)

Description

[Henry Wilkes (they/them) [:henry-x]]

Steps to reproduce

Tested with GTK and left-to-right direction:

1. Uncheck "Always show scrollbars" in General preferences (widget.gtk.overlay-scrollbars.enabled).
2. Open "about:blank" with HTML below (an #outer element with overflow: auto and an overflowing #inner child).
3. Add event listeners to #inner for "mouseeneter" and "mouseleave" that print to the console.
4. Add event listeners to the window for "mousemove" that prints the event target.
5. Move mouse from outside the scroll area on the right hand side of #outer to the inside.

<div id="outer" style="overflow: auto; height: 400px; width: 400px;">
  <div id="inner" style="background: pink; height: 1000px; width: 1000px;">
  </div>
</div>

Result

1. When the mouse is at the edge of #outer, we get "mouseenter" on #inner and the target of "mousemove" is #inner. Then we immediately get "mouseleave" on #inner.
2. Whilst the mouse is travelling over the now-visible overlay scrollbar, we get no "mouseenter" or "mousemove", and the target of "mousemove" is #outer.
3. At the inner-edge of the scrollbar we get "mouseenter" on #inner again and the target of "mousemove" switches to #inner.

Expect

"mouseenter" should only fire once, "mouseleave" should never fire, and the "mousemove" target should only switch once. Similar to when using non-overlay scrollbars.

Basically, it seems like step 1 is the bug. But I think having "mouseenter" fire when over the scrollbar would also make sense since it is an overlay scrollbar.

NOTE: when leaving the area, we only get "mouseleave" once at the scrollbar edge, and the "mousemove" target only switches once.