Checkbox: focus effect sometimes not showing up in Firefox

[WilhelmOlejnik]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

After tabbing between checkboxes, focused checkbox should be visually marked.

What is the current behavior?

Sometimes after tabbing checkbox is not visually marked despite that it's focused.

What are the steps to reproduce?

Demo, select first checkbox and press tab multiple times
https://stackblitz.com/edit/angular-hrkwcy
This bug also occurs on official checkbox example
https://material.angular.io/components/checkbox/examples

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Encountered this bug only on Firefox (55.0.3), works fine on Chrome and IE11
Material: 2.0.0-beta.10
Angular: 4.3.6
Typescript: 2.3.3
OS: Windows 8.1 Pro (tested also on Win 7 and 10, worked fine)

Is there anything else we should know?

Setting timeout to 3ms instead of 0 seems to fix this bug although I'm not sure if it's the right way to do it.
https://github.com/angular/material2/blob/f2cae6e8141c90fa0b62dc8a928f217bc085667b/src/lib/core/style/focus-origin-monitor.ts#L213-L216

When the bug occurs this line is executed two times
https://github.com/angular/material2/blob/f2cae6e8141c90fa0b62dc8a928f217bc085667b/src/lib/core/style/focus-origin-monitor.ts#L215
despite that this line is executed only one time
https://github.com/angular/material2/blob/f2cae6e8141c90fa0b62dc8a928f217bc085667b/src/lib/core/style/focus-origin-monitor.ts#L214
As a result origin is equal to null (instead of 'keyboard') when _onFocus method is called, which later leads to incorrect checkbox styling.

[kwasmich]

I have encountered the same issue with
Firefox: 55.0.3 (64_bit)
Material: 2.0.0-beta.11
Windows 7 Enterprise

https://github.com/angular/material2/blob/3571f68a2de0833ee4741af8a0eb24d1da174f38/src/lib/checkbox/checkbox.ts#L334-L341

In Firefox focusOrigin is randomly sometimes 'keyboard' and sometimes 'program'. In the latter case the focus ripple will not appear.