1478959 - Dropdown menus for the “News” and “About” items are not displayed on the “https://www.ea.com/” site

Status: RESOLVED INVALID

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

Description

[Timea Cernea [:tbabos][inactive]]

Attachment: Video of the issue

[Affected versions]:
latest Nightly 63.0a1

[Affected platforms]:
Windows 10 x64, Ubuntu 17.04, Mac OS X 10.12

[Steps to reproduce]:
1. Go to “https://www.ea.com/”
2. Hover over “News” and “About”

[Expected Result]:
The dropdown menus for the mentioned items should be displayed until the mouse cursor is no longer on the items.

[Actual Result]:
The dropdown menu does not appear at all for “About” while it appears intermittently or delayed for “News”.

[Notes]:
This does not occur on:
Nightly with preference OFF (dom.webcomponents.shadowdom.enabled)
Chrome
Latest Firefox Release version

Comment 1

[Emilio Cobos Álvarez (:emilio)]

I took a quick look and the menu is supposed to be open via adding the `open` attribute, which doesn't happen with Shadow DOM enabled... Presumably an event dispatch issue?

Comment 2

[Padraig.OhIceadha]

There is an event handler for the mouseenter event on the custom element which calls a function _toggleSubNav (found in //pl.ea.com/release/2.11.0/elements/ea-elements.js) :
_toggleSubNav() {
this.open = !this.open;
const e = this.open ? this.$.links.scrollHeight : 0;
requestAnimationFrame(() =>{
this.$.links.style.maxHeight = `${e
}
px`
})
}

If this gets called it works.

What seems to be happening is there are callbacks running in the background being triggered by requestAnimationFrame which seem to as a side effect cause the mouseenter event not to fire.

For example, in the same file,
_displayNetworkNav() {
const e = this.visible,
t = this._scrollY;
'top' === e ? this._toggleLocalNav(t)  : this._toggleNetworkNav(t),
this._displayNetworkNavRAF = window.requestAnimationFrame(() =>this._displayNetworkNav())
}

_toggleLocalNav(e) {
this.localNav && (40 <= e ? (this.classList.add('eapl-site-nav-hidden'), this.localNav.classList.remove('static-mode'))  : (this.classList.remove('eapl-site-nav-hidden'), this.localNav.classList.add('static-mode')))
}

By the way, while hovering over "About>" in Chrome 67 does cause a drop down menu to appear it doesn't for "News"

Comment 3

[Olli Pettay [:smaug][[e-mail]]]

Hmm, the website is doing something a weird.
If I add some dummy mouseenter/leave listener which just log information to web console, Chrome gets the same behavior as what Nightly has. Something seems to be racy or something.
Or does Chrome not dispatch some events without listeners.

Still investigating.

Comment 4

[Olli Pettay [:smaug][[e-mail]]]

addEventListener("mouseleave", function(e) { } , true); on 
<ea-local-nav-shelf-sub-nav slot="local-nav-shelf-link" toggle-text="About" theme="dark" type="simple" detached=""> element is enough to trigger this weird behavior in Chrome.
Occasionally the about menu isn't opened, or it is opened when mouse is moved outside the element, similar to what happens in Nightly.

Comment 5

[ExE Boss]

It seems like EA have changed the “News” navbar item to be a normal link to https://www.ea.com/news.

Also, the “About” navbar item’s dropdown appears for me after I move the cursor off the element in latest Nightly 63.

Comment 6

[Olli Pettay [:smaug][[e-mail]]]

Yes, and once one adds a dummy event listener, also Chrome starts to behave close to how Nightly does.

Comment 7

[Andrew Overholt [:overholt]]

Given the above, I'm going to close this as a site bug. If we think it's worth it, we can ask Adam Stevenson if he has any contacts at EA to alert them to this.

(Yes, "INVALID" seems weird but it's the best I can see in the list of options.)

Comment 8

[Olli Pettay [:smaug][[e-mail]]]

I'm still investigating this. And I tried to ping EA using their twitter help account

Comment 9

[Timea Cernea [:tbabos][inactive]]

If it helps, there is another drop-down that behaves the same way on "https://www.battlefield.com/companion", check "Career".
On Chrome it works without issues, while on Nightly the drop-down menu appears rarely upon hovering in any mode over "Career". 

Also, if the drop-down menu appears the options within it will not be highlighted as it can be seen on Chrome.

Comment 10

[Olli Pettay [:smaug][[e-mail]]]

that is probably the same issue, since it uses same ea-elements code.

Comment 11

[Timea Cernea [:tbabos][inactive]]

Hi Olli,

Given that the mentioned "About" and "Career" drop-down menus do not appear as expected by simply hovering over them, shouldn't they at least appear when are clicked on? 
In the current state, users can hardly access all the options from those drop-down menus if shadowDOM is enabled.

Comment 12

[Olli Pettay [:smaug][[e-mail]]]

the widget seems to be designed to use mouseenter/leave, but somehow buggy way, since the buggyness can be seen also in Chrome if one just adds a dummy listener. But I'm debugging this still a bit, since I'd like to understand why that all is happening.

Comment 13

[Olli Pettay [:smaug][[e-mail]]]

yeah, this is a Chrome bug. If mouseenter listener is added to the shadow element containing text About, one gets exactly the same behavior what Firefox has. The issue is that Chrome tries to optimize out mouseenter/leave in a broken way.

https://chromium.googlesource.com/chromium/src/+/b34b7be96c8e4026ab5f17598b4c0682b70b532f/third_party/blink/renderer/core/input/boundary_event_dispatcher.cc#76


Writing a testcase and filing a blink bug.

Comment 14

[Olli Pettay [:smaug][[e-mail]]]

Attachment: testcase showing the issue in Chrome

Comment 15

[Olli Pettay [:smaug][[e-mail]]]

https://github.com/w3c/uievents/issues/208
if we want to change the behavior to something which no browser has, but which would be quite reasonable.

Comment 16

[Emilio Cobos Álvarez (:emilio)]

I think we should still contact EA about this. Karl, could you take care of that?

Comment 18

[Olli Pettay [:smaug][[e-mail]]]

FWIW, bug 1484371 landed today to mozilla-inbound, I guess it should be in Nightly tomorrow.
UIEvents spec has been changed, and pointer events spec still waiting for merge.
Chrome and Safari do still have their bugs, so if one adds event listeners inside shadow DOM, ea.com will be broken on those.

Comment 19

[Timea Cernea [:tbabos][inactive]]

Thanks for the fix Olli!

Retested the issue on the latest Nightly 63.0a1 (2018-08-22) on Windows 10, Ubuntu 18.04. and Mac OS 10.13.
The dropdowns for "About" and "Career" are working now as expected on ea.com and battlefield.com

Comment 20

[Karl Dubost💡 :karlcow]

Confirmed. This is resolved.