I'm getting a strange behaviour with :focus-visible in Chrome, Edge and Canary. I want the anchors on a navbar to display a purple outline when focused with the keyboard. Their class include outline: $the-purple-color auto 1px !important.

However, when I focus those elements, for a very brief moment, I get a black outline, and then immediately switches to the correct color. That black color seems to come from a "user agent stylesheet" with the pseudoclass :focus-visible { outline: -webkit-focus-ring-color auto 1px; }, where -webkit-focus-ring-color seems to be black. I believe this is the source of the black outline because, if I turn off my custom class, it'll default to the "user agent stylesheet" one.

I haven't found that phenomenon on the Internet. How can I keep my outline in one solid colour without blinking to the default one?

EDIT: Here's the code:

<header class="main-header">
  <div class="row">
    <div class="col col-12">
      <nav class="navbar">
        <div>
          <ul>
            <li class="nav-item">
              <a>Home</a>
            </li>
          </ul>
        </div>
      </nav>
    </div>
  </div>
</header>

header {
  &.main-header {
    .navbar {
      li {
        a {
          &:focus-visible {
            // $menu-hover-color: #bf00ff
            outline: $menu-hover-color auto 1px !important;
          }
        }
      }
    }
  }
}

EDIT: A list of things I've already tried:

• Changed the variable for the hex colour.
• Changed the variable for another colour.
• Normalized the outline of *:focus-visible to 0.
• Normalized the outline of *:focus-visible to another colour. I still get the black blink.
• Gave the wrapping li an outline-colour other than purple and black to see if the black blink was picked up by this element.

CodePudding user response：

The issue was that another class was adding a transition: ... all that had unintended consequences.