STR:

1. Set about:config pref browser.display.focus_ring_on_anything to true
2. Visit https://www.wikipedia.org/
3. Press Tab until the "Read Wikipedia in your language" dropdown-button is focused

Or alternately: after setting the pref, just load the attached testcase.

ACTUAL RESULTS:
The focused element gets a giant dotted outline for a fraction of a second.

EXPECTED RESULTS:
No such giant dotted outline.

Wikipedia happens to style this element with outline: 1.6rem solid #fff; which in this case is a 16px-thick outline -- but this outline isn't actually meant to be seen. It's just their way of creating gaps between this button and the lines on either side of it (which are actually drawn by the lang-list-border element).

When we focus the element and add our own custom outline CSS, we apply our own outline style to draw a focus outline, with a dotted black outline with a different outline-width. The color and dotted-style show up immediately, but the outline-width changes slowly since the site happens to have a transition specified for that property. So we end up drawing something pretty broken-looking while that transition plays.

I spun this off from bug 1821890 comment 4, though I think this is semi-distinct from what the user was reporting there.

I can reproduce with the attached testcase in old Nightly, e.g. 2013-01-01, so I think this isn't a regression (or not a recent one).

Probably bug 1829766 will fix this; the fact that we're drawing a dotted outline at all here (triggered by this particular pref-flip) seems to have been an oversight.