outline on focus-visible is not even?
So in my styles i have btn:hover and i add an outline. the first screenshot with the uneven outline is coming from my styles when i hover. but when i tab to the button, its an even outline. same if i change the outline to a border property. why is my outline/border so wonky and uneven? but in its :focus/:focus-visible state its fine?
https://codepen.io/Miss-Fox/pen/bGPbVrJ
4 Replies
I think a few things at play. First, sub pixel rendering on the roundness of it makes it less "crisp", and that's hightlighted by the contrast with the background. The default focus ring looks better because it's black and white, and I think the white hides some of the issue
Also, there is a very small gap between the outline and the element with when you have a border radius (again, I htink, because of the subpixel rendering of the outline having some issues). If you add
outline-offset: -1px so that it's partially overlapping the element, it looks better, at least in my opinion 😄Thanks so much , my solution was also to add a negative offset. I didn't realize the default focus had white; I thought it was black inset and the neon colour of the btn.
I have run into this subpixel thing too many times to count, with underlines and radial-gradients etc. Just realized the border on the avatars on the same page have the same issue.
And also looking at this on my phone vs my external monitor doesn't show the border as wonky , even in the screenshot so must be the display pixel thing.
Thanks for your guidance!
scaleseems to be doing something for me. Compare between 1.3 and 1.6. Better with 1.6 as well as 1.2 (maybe beacuse "easier" to divide since desktop screens use squared pixels?)
Glad you worked it out anyways.interesting, i had commented out that scale altogether to see if that was the problem and i didnt see any change on my monitor. although i wonder if my scale of 1.3 with outline offset of -3px has any correlation to fix it. good point about squared pixels i should keep that in mind and i really should just be increasing the font size instead of being lazy and scaling 🤣 appreciate your input and experimenting!!
