Able to reproduce the issue on Windows-7,Windows-10 and Mac-10.12.6 using chrome stable version #62.0.3202.94 and canary #64.0.3282.5 with the steps mentioned in comment#0.
This is Non-Regression issue, observed from M50 #50.0.2626.0 and marking it as Untriaged to get more inputs from dev team.

Thanks..!!

The site specifically requests a semibold version (font-weight 500) of the Segoe UI font. We honor that request and render it with Segoe UI Semibold at a weight of 500. For some reason Firefox does not and instead uses the regular weight (font-weight 400) of Segoe UI Regular.

I can't get the pane to show up in Edge.

I'd argue that our behavior here is correct.

I guess I’ll file bugs in Firefox and Edge then

Per css-fonts-3 spec, "If the desired weight is 500 (medium), 400 is checked first and then the rule for desired weights less than 400 is used."
 
Specified font-weight on this element is 500 (which is medium, not semibold). Segoe UI family has two fonts: regular with weight 400 and semibold with weight 600. Edge and Firefox follow the spec and choose regular Segoe UI. Chrome chooses semibold, which is incorrect.

(css-fonts-4 rules are a bit more complex because it allows continuous font-weight, but end result should be the same in this case)

Also see https://bugs.chromium.org/p/chromium/issues/detail?id=733646, which describes Chrome current behavior as incorrect.

@eae - Sergey, who left a comment above is a developer for Microsoft Edge and he reached offline to note that this might be still a valid issue.

Can I please kindly ask you to take a look again at this?

Thanks for the clarification Sergey and Bogdan. I should have checked the weights more carefully.

Can't wait for the day we can start using variable fonts everywhere.

Thanks for the report, I plan to address a set of issues we have with matching system fonts, I'll take this issue into account.