Closed Bug 1205244 Opened 4 years ago Closed 2 years ago

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

Categories

(Web Compatibility :: Desktop, defect)

Unspecified
All
defect
Not set

Tracking

(Not tracked)

RESOLVED FIXED

People

(Reporter: bad.red.sol, Unassigned)

References

()

Details

(Whiteboard: [suggested fix: use "relatedTarget" instead of "toElement"] [sitewait] [country-all])

Attachments

(2 files)

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.
OS: Unspecified → Windows 7
Hardware: Unspecified → x86_64
It doesn't work with FF17 so it might be a bug in the Steam's website source code.
Component: Untriaged → Layout
Product: Firefox → Core
Status: UNCONFIRMED → NEW
Ever confirmed: true
OS: Windows 7 → All
Hardware: x86_64 → Unspecified
Whiteboard: [parity-IE] [parity-Chrome][parity-Edge]
Version: 42 Branch → Trunk
Duplicate of this bug: 1205246
Same here with firefox 41.0.2 on ubuntu 15.04
ReConfirming, and trying to push this to the right person at steam.
This issue does not occur in IE, Chrome, or Edge btw.
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.
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.
Attached file testcase 1
Summary: steam store website navigation bug → steam store website "flyout" menus disappear when you move the mouse away from their title
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.)
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.
Component: Layout → Desktop
Flags: needinfo?(john)
Product: Core → Tech Evangelism
Summary: steam store website "flyout" menus disappear when you move the mouse away from their title → steam store website "flyout" menus disappear when you move the mouse away from their title, due to use of non-standard "event.toElement"
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;
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.
Whiteboard: [parity-IE] [parity-Chrome][parity-Edge] → [suggested fix: replace "toElement" with "relatedTarget"]
Whiteboard: [suggested fix: replace "toElement" with "relatedTarget"] → [suggested fix: use "relatedTarget" instead of "toElement"]
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 :)
I stole Daniel's thunder and sneakily commented in that bug - thanks (and sorry, Daniel..)
Whiteboard: [suggested fix: use "relatedTarget" instead of "toElement"] → [suggested fix: use "relatedTarget" instead of "toElement"] [sitewait] [country-all]
Oops, looks like we did some duplicate work here (but came to same analysis!): https://github.com/webcompat/web-bugs/issues/1886#issuecomment-153962858
Depends on: 1205027
No longer depends on: 1205027
We'll look into this on our side, thanks for the heads up!
Thanks John!
This is fixed internally and should be pushed to public with a planned update early next week
Flags: needinfo?(john)
Awesome, thanks so much John.
Problem also when click "change language" in menu next to Avatar(Click on triangle). This menu sometime disappears and problem with change language.
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
This fix should now be live
Yup, seems to work great for me now. Thanks, John!
Status: NEW → RESOLVED
Closed: 4 years ago
Resolution: --- → FIXED
Tested and fixed.
Thanks a lot everyone.
The bigger problem is Bug 1205027. Steam store website does not load the rest of the webpage when scrolling down.
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.)
This is very true, I can reproduce in both Stable and Nightly on Mac and Windows as well. Let's reopen.
Status: RESOLVED → REOPENED
Resolution: FIXED → ---
Valve did some magic, and it's fixed again. Yay. :)
Status: REOPENED → RESOLVED
Closed: 4 years ago2 years ago
Resolution: --- → FIXED
Product: Tech Evangelism → Web Compatibility
You need to log in before you can comment on or make changes to this bug.