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)
Tracking
()
Webcompat Priority | P3 |
People
(Reporter: karlcow, Unassigned)
References
(Depends on 1 open bug, )
Details
(Keywords: webcompat:needs-contact)
Attachments
(1 file)
709 bytes,
text/html
|
Details |
To reproduce.
- With latest Nightly (currently 71 for me) on Desktop
- Go to https://www.fila.co.uk/mens/
- hover the Men menu in the top navigation bar.
- A large dropdown is displayed
- 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))
})
}
}
Reporter | ||
Comment 1•5 years ago
|
||
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")
}
Comment 2•5 years ago
|
||
I can't quite interpret the initial message whether this is a regression.
Reporter | ||
Comment 3•5 years ago
|
||
Olli, I don't know. I haven't tried with an old version, but for sure it "breaks" from 68 to 71 at least.
Comment 4•5 years ago
|
||
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.
Updated•5 years ago
|
Comment 5•5 years ago
|
||
Ksenia, do you think you could come up with a reduced test case for this issue? Thanks.
Comment 6•4 years ago
|
||
Comment 7•4 years ago
•
|
||
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)
Comment 8•4 years ago
|
||
We should probably try to get in touch with them to see if they can update the code to use standards.
Comment 9•4 years ago
|
||
I've sent a message to someone who works on the site.
Updated•2 years ago
|
Updated•2 years ago
|
Description
•