Description

Default Firefox user agent :focus-visible white outlines were applying right after a CSS transition towards :focus-visible started.

This made the element outline change to white on focus (from the already-set, different color), then change to the color set for the focus styling, which would cause a flicker effect of 3 colors instead of the desired 2 colors.

Steps
  1. change the value that causes the issue to some other value besides "none"
    1. for example, "outline-color: transparent" fixes the outline flicker issue without adding an outline
Notes
  • Using "<property>: none" doesn't fix the issue.

    This is relevant to other CSS styles, adapt to the relevant CSS properties.