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




9 months ago
8 months ago


(Reporter: timea.babos, Unassigned)



Firefox Tracking Flags

(firefox63 affected)




(2 attachments)



9 months ago
Posted video 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”.

This does not occur on:
Nightly with preference OFF (dom.webcomponents.shadowdom.enabled)
Latest Firefox Release version
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?
Component: DOM → DOM: Events
Flags: needinfo?(bugs)
Priority: -- → P2

Comment 2

9 months ago
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

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"
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.
Flags: needinfo?(bugs)
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

8 months ago
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.
Yes, and once one adds a dummy event listener, also Chrome starts to behave close to how Nightly does.
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.)
Last Resolved: 8 months ago
Resolution: --- → INVALID
I'm still investigating this. And I tried to ping EA using their twitter help account

Comment 9

8 months ago
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.
Flags: needinfo?(bugs)
that is probably the same issue, since it uses same ea-elements code.
Flags: needinfo?(bugs)

Comment 11

8 months ago
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.
Flags: needinfo?(bugs)
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.
Flags: needinfo?(bugs)
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.


Writing a testcase and filing a blink bug.
if we want to change the behavior to something which no browser has, but which would be quite reasonable.
I think we should still contact EA about this. Karl, could you take care of that?
Flags: needinfo?(kdubost)


8 months ago
Duplicate of this bug: 1439794
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

8 months ago
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
Confirmed. This is resolved.
Flags: needinfo?(kdubost)
You need to log in before you can comment on or make changes to this bug.