[HanziQ] [Website] Glitchy dropdown menu

[antipin00]

Dropdown menus at the top of the website flicker if mouse cursor was temporarily moved away.

Steps to reproduce:
1. Go to http://www.factorio.com
2. Move cursor over Support (or Game) entry at the top, wait for animation to finish, then move it over dropdown
3. Quickly, before dropdown disappears, move cursor away from it and immediately back
4. Keep moving cursor over dropdown, otherwise it'll stop glitching

Tested on Firefox 57.0 and Chrome 62.0.3202.94 on Win 8.1 x64 and on Firefox 57.0 on Ubuntu 16.04 x64

In Firefox, effect remains even without 4th step (that's how I found it: it just appeared and began flickering after I randomly moved my mouse across devblog screen)

[Klonan]

I am able to reproduce the issue quite:

[Jon8RFC]

This seems like it's a lose-lose situation, unfortunately. Either it's a nice and responsive drop-down menu but it glitches, or it's delayed and doesn't glitch.

Adding a delay stops the glitch, but it's not as responsive.
/static/css/factorio.min.css:

Code: Select all

.custom-dropdown-menu {
  position: absolute;
  top: 100%;
  z-index: 1000;
  display: none;
  min-width: 160px;
  padding: 5px 0;
  margin: 0px 0 0;
  list-style: none;
  background-color: #3a3f44;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  *border-right-width: 2px;
  *border-bottom-width: 2px;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
     -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
          background-clip: padding-box;
-webkit-transition-delay: 300ms;
-moz-transition-delay: 300ms;
-ms-transition-delay: 300ms;
-o-transition-delay: 300ms;
transition-delay: 300ms;
}

It seems like firefox is very reliably the worst offender out of my testing in Firefox 57, Chrome 62, IE 11 (did not test any others).

Unless firefox is used by the majority of visitors to factorio.com (forum usage isn't the metric to look at), it seems like the best change, if any, would be to only include -moz-transition-delay. If firefox is the majority, looking into some mouse tracking might be worth it, and it'll solve the problem across the board.

Unimportant opinions:

The glitch doesn't make me think "this website is sluggish and irritating", and after looking over both options, if I had to choose responsiveness or glitch-free, I'd choose responsiveness. However, nobody visiting the website will think "I'm glad they chose this option over the other one", so the question will have to be "since they won't know it was choosing the lesser of two evils, what would we rather have them deal with and have their opinion of our site be?" That's a tougher question.

You can't win this one without some kind of fancy cursor/mouse tracking, and I wouldn't even know where to begin with that. One example I can give of sluggishness that irritates me to no end is visiting bing.com on my android phone. I'd rather a glitch of tapping twice on the search box (which would also be irritating) than having to remember "don't tap on the search textbox yet, or else the sluggish load/delay of the advertisement will force me to download the app...wait a couple of seconds so the tap isn't misinterpreted by the horribly slow and unresponsive website". Either option for that site would be awful, but we're an impatient society and studies have shown that people ditch a website and go to another search result if it doesn't load quickly, even if the information isn't as good. That's not exactly applicable, but the desire for speed over quality is applicable. It's probably a similar reason as to why people like fast food--they'll take the glitch of lesser food than having to wait for better food.

[HanziQ]

This one is probably going to stay until we get to redoing the website at some point.