Open Bug 1578346 Opened 5 years ago Updated 2 years ago

Can't expand list as ihover over men's, as it disappears by the time I go to reach for the link.

Categories

(Core :: DOM: Events, defect, P3)

68 Branch
Unspecified
Windows 10
defect

Tracking

()

Webcompat Priority P3
Tracking Status
firefox69 --- affected
firefox70 --- affected
firefox71 --- affected

People

(Reporter: karlcow, Unassigned)

References

(Depends on 1 open bug, )

Details

(Keywords: webcompat:needs-contact)

Attachments

(1 file)

To reproduce.

  1. With latest Nightly (currently 71 for me) on Desktop
  2. Go to https://www.fila.co.uk/mens/
  3. hover the Men menu in the top navigation bar.
  4. A large dropdown is displayed
  5. Try to reach one of the links there

Expected:
We can reach a link

Actual:
As soon as the cursor exit The men hover area, the dropdown is closed.

This is not happening in Chrome at normal speed. BUT can be reproduce by moving super slowly the cursor on chrome. So there's probably a timing issue.

The issue is happening when dealing with a mouseleave event.

        {
          key: '_deactivateDropdown',
          value: function (t) {
            var e = t[0].parentNode,
            i = (0, s.default) (e).find('.navigation-main__subnav'), n = i.find('.subnav-column'); t[0].classList.contains('is-active') && (TweenMax.staggerTo(n, 0.4, {
              opacity: 0,
              ease: 'fade',
              clearProps: 'opacity'
            }, 0.05), TweenMax.to(i, 0.5, {
              opacity: 0,
              delay: 0.2,
              ease: 'fade',
              clearProps: 'opacity',
              onComplete: function () {
                t.removeClass('is-exiting')
              }
            }), t.addClass('is-exiting').removeClass('is-active'), t[0].setAttribute('aria-expanded', 'false'))
          }
        },

and

        {
          key: '_onDropdownMouseleave',
          value: function () {
            this.mouseDelta.y >= 0 && this._deactivateAll()
          }
        },

and

        {
          key: '_deactivateAll',
          value: function () {
            var t = this;
            this.el.dropdownItems.each(function (e) {
              t._deactivateDropdown((0, s.default) (e))
            })
          }
        }

I wonder if the delay in there is for something

                TweenMax.to(i, .5, {
                    opacity: 0,
                    delay: .2,
                    ease: "fade",
                    clearProps: "opacity",
                    onComplete: function() {
                        t.removeClass("is-exiting")
                    }

I can't quite interpret the initial message whether this is a regression.

Flags: needinfo?(kdubost)

Olli, I don't know. I haven't tried with an old version, but for sure it "breaks" from 68 to 71 at least.

Flags: needinfo?(kdubost)

This seems to break very often on Chrome too. I wonder if this depends on which areas on the page happen to get mouse events
(whether it is mouseenter/over/move/out/leave). Traditionally Gecko has dispatched more mouse events than Blink, IIRC even after mousemove coalescing.

Priority: -- → P3

Ksenia, do you think you could come up with a reduced test case for this issue? Thanks.

Flags: needinfo?(kberezina)
Attached file 1578346.html
Flags: needinfo?(kberezina)

They're relying on event.toElement/event.fromElement which are not implemented in Firefox, so I guess a related bug is https://bugzilla.mozilla.org/show_bug.cgi?id=1539619

function l(t) {
       var r = i ? (0, n.default)(t.target, i, !0) : this;
       if ("mouseenter" === e || "mouseleave" === e) {
          var o = "mouseenter" === e ? t.fromElement : t.toElement;
             if (r && o !== r && !r.contains(o)) {
                 s.call(r, t)
             } 
        } else {
             r && s.call(r, t)
        }                
    }

in this case var o is undefined , so this condition is always satisfied: r && o !== r && !r.contains(o) and this function is called, resulting in hiding the dropdown:

        {
          key: '_onDropdownMouseleave',
          value: function () {
            this.mouseDelta.y >= 0 && this._deactivateAll()
          }
        },

attached a reduced testcase as well (hover on the green box)

Depends on: 1539619

We should probably try to get in touch with them to see if they can update the code to use standards.

Webcompat Priority: ? → revisit
Flags: needinfo?(miket)

I've sent a message to someone who works on the site.

Webcompat Priority: revisit → P3
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: