Encountered an unusual issue with :focus-visible in Chrome, Edge, and Canary. Trying to add a purple outline to the anchors on a navbar when they are focused via keyboard. The class includes
outline: $the-purple-color auto 1px !importantHowever, upon focusing on these elements, there is a momentary black outline before switching to the correct color. This black color appears to be from a "user agent stylesheet" with the pseudoclass
:focus-visible { outline: -webkit-focus-ring-color auto 1px; }-webkit-focus-ring-color seems to default to black. Suspect this is causing the black outline, as without my custom class, it reverts to the "user agent stylesheet" one.
No information found online about this phenomenon. Seeking solutions on maintaining a consistent solid color outline without any flicker to the default one.
EDIT: Code snippet provided below:
<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: Attempted fixes include:
- Altered variable for hex color.
- Changed variable to a different color.
- Set outline of
*:focus-visibleto0. - Modified outline of
*:focus-visibleto another color, but still experienced the black blink. - Assigned a different
outline-colourto the wrappinglito check if the black blink was attributed to that element.