1205244 - steam store website "flyout" menus disappear when you move the mouse away from their title, due to use of non-standard "event.toElement"

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[bad.red.sol]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:42.0) Gecko/20100101 Firefox/42.0
Build ID: 20150915004227

Steps to reproduce:

Trying to use the main menu of site http://store.steampowered.com/. I was hovering on the main menu items, for example "software" and tried to choose submenu.



Actual results:

It's impossible to choose submenu. It becomes not available and invisible after hovering.


Expected results:

Working submenu.

Comment 1

[Loic]

It doesn't work with FF17 so it might be a bug in the Steam's website source code.

Comment 3

[mail]

Same here with firefox 41.0.2 on ubuntu 15.04

Comment 4

[Danial Horton]

ReConfirming, and trying to push this to the right person at steam.

Comment 5

[Danial Horton]

This issue does not occur in IE, Chrome, or Edge btw.

Comment 6

[Daniel Holbert [:dholbert]]

From poking around with devtools for a few minutes:

 - The menu that appears/disappears is called <div id="software_flyout">.  The page normally has it styled as "display:none" (in its inline style attribute), but changes it to "display:block" when it's hovered.
 - As soon as you move your mouse off of the top of the menu, the page changes it back to "display:none" [after changing its opacity rapidly].

So, the problem here seems to be with whatever event the page is using to trigger the code that re-hides the menu.

Comment 7

[Daniel Holbert [:dholbert]]

So actually, the same event gets fired in Firefox & Chrome (for "mouseleave") when the mouse un-hovers the menu button -- and the same code gets invoked -- BUT, there's a special case that bails out from the "hide" code in Chrome, if a particular node matches "e.toElement".  (I think this is basically checking if we've left the menu-button, and we're entering the menu.)

The problem is, in Firefox, "e.toElement" is undefined.

e.toElement is something that's set by jquery, so I think this is either a jquery bug, or a bug in some jquery/Firefox interaction.

Comment 8

[Daniel Holbert [:dholbert]]

Attachment: (jquery snapshot, for use in testcase)

Comment 9

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

Comment 10

[Danial Horton]

Did some digging

According to http://stackoverflow.com/questions/8600174/event-toelement-in-ie8-and-firefox

"In Firefox it is event.relatedTarget https://developer.mozilla.org/en/DOM:event.relatedTarget#1003983"

Also, event.toElement / e.toElement is not?? being used with IE11, so steam is actually using code specific to that browser??

I can honestly see issues occuring going forward from here if e.toElement remains undefined, as chrome seems to be becoming the lazy route for website support (heh, was IE once a upon a fairy tale.)

Comment 11

[Daniel Holbert [:dholbert]]

According to http://www.quirksmode.org/js/events_mouse.html#relatedtarget , "toElement" actually came from Microsoft originally, and relatedTarget is the W3C standardized name.

Quoting:
 # W3C added the relatedTarget property to mouseover and mouseout events.
 # This contains the element the mouse came from in case of mouseover, or
 # the element it goes to in case of mouseout.
 #
 # Microsoft created two properties to contain this information:
 # * fromElement [...]
 # * toElement [...]

So, it sounds like this is not a bug in Firefox - it's a bug in Steam (hence, reclassifying as Tech Evangelism).  They're relying on a Microsoft-specific extension which Chrome happens to also implement (and which there's a standards-based name for as well, which is what would work in Firefox [and hopefully the other browsers as well?)

John, if you're still following Bugzilla: do you have any contacts who work on the Steam site, and could you see if they could try using "e.relatedTarget" instead of (or in addition to) "e.toElement" here?  Hopefully that should make the menu work in Firefox.

Comment 12

[Daniel Holbert [:dholbert]]

The JS file in question is:
 http://store.akamai.steamstatic.com/public/shared/javascript/shared_global.js

That file *does* actually have some usages of "relatedTarget", but it uses non-standard "toElement" in the crucial place for these menus to work, which is this chunk of "BindAutoFlyoutEvents()":
>	$J(document).on('mouseleave.Flyout', '.flyout_tab', function(e) {
[...]
>		if ( !$Content.length || $Content.data('flyout-event-running') || bResponsiveSlidedownMenu ||
>			$Content.is( e.toElement ) || $J.contains( $Content[0], e.toElement ) )
>			return;

Comment 13

[Daniel Holbert [:dholbert]]

That's definitely it. If I save that Steam page locally (using the "Web Page, complete" option to capture scripts, css, etc.) and modify the saved copy of shared_global.js to replace "toElement" with "relatedTarget", then these menus start working correctly in Firefox -- and they continue working correctly in Chrome, happily.

Comment 14

[mail]

Nice digging ! :) I am surprise that there is not more complains about this because it's been some time since I notice that bug. And this should affect all firefox users.

You might want to post the fix on github : https://github.com/ValveSoftware/steam-for-linux/issues/4029#issuecomment-152723439 because there it says it is a firefox bug :)

Comment 15

[Hallvord R. M. Steen [:hallvors]]

I stole Daniel's thunder and sneakily commented in that bug - thanks (and sorry, Daniel..)

Comment 16

[Mike Taylor [:miketaylr]]

Oops, looks like we did some duplicate work here (but came to same analysis!): https://github.com/webcompat/web-bugs/issues/1886#issuecomment-153962858

Comment 17

[John Schoenick [:johns]]

We'll look into this on our side, thanks for the heads up!

Comment 18

[Daniel Holbert [:dholbert]]

Thanks John!

Comment 19

[John Schoenick [:johns]]

This is fixed internally and should be pushed to public with a planned update early next week

Comment 20

[Mike Taylor [:miketaylr]]

Awesome, thanks so much John.

Comment 21

[mkdante381]

Problem also when click "change language" in menu next to Avatar(Click on triangle). This menu sometime disappears and problem with change language.

Comment 22

[forgames_01]

Hello everyone

Just another thing about this issue.

If you do a very fast 'enter and leave' on the button menu, the menu will stay open only if you leave from a side different that the one you use to enter (up, down, left, right).
ex: you enter fast from top to bottom(or left or right), the menu stays and you can select your option.

You can do this to all buttons so all the submenus stay onscreen, check :)
http://imgur.com/vUf8373

Comment 23

[John Schoenick [:johns]]

This fix should now be live

Comment 24

[Daniel Holbert [:dholbert]]

Yup, seems to work great for me now. Thanks, John!

Comment 25

[Karl Dubost💡 :karlcow]

Tested and fixed.
Thanks a lot everyone.

Comment 26

[mkdante381]

The bigger problem is Bug 1205027. Steam store website does not load the rest of the webpage when scrolling down.

Comment 27

[Daniel Holbert [:dholbert]]

It seems this has started happening again (not sure if it's the same root cause or not) -- see https://github.com/ValveSoftware/steam-for-linux/issues/5375 .  (I tested & I can reproduce on Linux Firefox Nightly. Can't repro on Chrome.)

Comment 28

[Dennis Schubert [:denschub]]

This is very true, I can reproduce in both Stable and Nightly on Mac and Windows as well. Let's reopen.

Comment 29

[Dennis Schubert [:denschub]]

Valve did some magic, and it's fixed again. Yay. :)