Chrome/Edge等浏览器:focus-visible聚焦时轮廓颜色闪烁如何解决？

可行解决方案 #

1. 同步重置:focus和:focus-visible的默认样式

你出现闪烁的核心原因是 Chromium 内核浏览器会先触发:focus伪类，再匹配是否符合:focus-visible的触发条件，两个伪类的切换间隙就会露出用户代理的默认黑色轮廓。你之前只修改了:focus-visible的样式，没有覆盖默认的:focus规则。
首先在全局样式最顶部加入重置规则：

*:focus {
  outline: none !important;
}
*:focus-visible {
  outline: none !important;
}

再给你的导航链接单独设置样式即可：

header.main-header .navbar li a:focus-visible {
  outline: #bf00ff auto 1px !important;
}

2. 替换outline为box-shadow实现相同效果

如果修改伪类规则后仍有闪烁，可以放弃原生outline属性，用不影响布局的box-shadow实现轮廓效果，完全避开用户代理的outline渲染时序问题：

header.main-header .navbar li a:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 1px #bf00ff !important;
}

3. 排查样式加载时序问题

如果以上方案都无效，检查你的自定义样式是否是异步加载、或者被插入到页面的顺序晚于用户代理样式解析时机，可以把:focus和:focus-visible的重置规则直接写到HTML文档头部的内联<style>标签里，确保样式在页面元素渲染前就已经生效。

内容的提问来源于stack exchange，提问作者Happy Milk