当聚焦于元素时，轮廓以不同的颜色闪烁。如何让它正常工作？

Question

我在 Chrome、Edge 和 Canary 中遇到 :focus-visible 的奇怪行为。我希望导航栏上的锚点在使用键盘聚焦时显示紫色轮廓。他们的 class 包括 outline: $the-purple-color auto 1px !important.

然而，当我聚焦这些元素时，在很短的时间内，我得到一个黑色轮廓，然后立即切换到正确的颜色。黑色似乎来自带有伪 class :focus-visible { outline: -webkit-focus-ring-color auto 1px; } 的“用户代理样式表”，其中 -webkit-focus-ring-color 似乎是黑色。我相信这是黑色轮廓的来源，因为如果我关闭自定义 class，它将默认为“用户代理样式表”。

网上没发现这种现象。我怎样才能让我的轮廓保持一种纯色而不闪烁到默认颜色？

编辑：这是代码：

<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;
          }
        }
      }
    }
  }
}

编辑：我已经尝试过的事情列表：

更改了十六进制颜色的变量。
更改了另一种颜色的变量。
将 *:focus-visible 的轮廓标准化为 0。
将 *:focus-visible 的轮廓标准化为另一种颜色。我仍然得到黑色眨眼。
给包装 li 一个 outline-colour 除了紫色和黑色以外的颜色，看看黑色闪烁是否被这个元素拾取。

Answer 1

问题是另一个 class 添加了一个 transition: ... all，这产生了意想不到的后果。

当聚焦于元素时，轮廓以不同的颜色闪烁。如何让它正常工作？

When focusing on element, the outline blinks in different colours. How to make it work normally?

html

css

google-chrome

sass

bootstrap-4