open-props
open-props copied to clipboard
argyleink
:focus-visible not respecting the outline-color
Not sure if it is intentional but outline-color does not work alone.
A fix i found is to add outline-style : solid; on the theme.css file so it respects the rule.
/* :file src/extra/theme.css */
:focus-visible {
outline-style : solid;
outline-color : var(--link);
}
oh!? which browser did it not work with? solution seems reasonable but i'd love to understand the problem scenario a bit better first. thanks for reporting
I tried both Chrome and Firefox on windows 10. Both seemed to use their own color until you set the outline-style
I see! confirmed on MacOS as well that Firefox and Safari don't change the outline color unless outline-style is provided.
big bummer tho:
when you change the outline-style, the automatic border-radius matching goes away and we're back to square cornered outlines.. it appears there's a cross browser interop issue with this feature. i'm going to get this on our interop teams radar and see if we can resolve it in Safari and Firefox.
Oh, and I see you're saying Chrome on Windows also fails at this, which it works as expected in Chrome on MacOS. Definitely a browser interop issue imo. Will report back here as I learn more.
when you change the outline-style, the automatic border-radius matching goes away
This is Firefox and Chrome (Win) outline-style: dashed, the inner gray line is the border.
Safari has/had issue with outline + border radius so we "fake" them there with multiple box-shadow (solid lines only though). We need to support mobile SF13 :(
