What determines the pixel depth of Chrome/Mac outline focus ring style? - css

Question

I have a bit of a bug where some members in my team see focus styles differently on the same element. They are running Chrome 86 on Mac. I am running Chrome 79.
When this specific element is focused, I see the basic focus ring I am used to, the blue glow at a depth of 5px
My colleagues however see a very narrow 2px border around the focused element.
The code for the element is:
<button>
<img ... />
</button>
The image inside the button has overflow:hidden applied in order to give the appearance of a centre crop.
Here is a snippet
button {
display: inline-flex;
width: 100px;
height: 100px;
align-items: center;
overflow: hidden;
position: relative;
margin-right: 8px;
margin-top: 8px;
border: 0;
cursor: pointer;
}
img {
margin: 0 auto;
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
position: absolute;
right: 50%;
top: 50%;
transform: translate(50%, -50%);
}
<button>
<img src="https://picsum.photos/id/1062/100/50">
</button>
I'm trying to understand what the cause of the change in user agent stylesheet settings is and why it would cause this difference.
The focus style I see:
outline: -webkit-focus-ring-color auto 5px;
My colleagues see:
outline: -webkit-focus-ring-color auto 2px;
However, this isn't universal on their browsers. They see the 5px on other elements.
I don't really want to start adding new focus styles as I'd prefer to honour the browser's own settings in case the user has specified a focus style that works for them.
My main questions
What causes the browser to choose the thickness of the focus ring?
Could the overflow:hidden on the image inside be the cause of this bug?
Why don't I see the issue on Chrome 79?

Answer 1

What causes the browser to choose the thickness of the focus ring?
The browser's built-in stylesheet ("user-agent styles"). This is liable to change with every major browser update - it's also platform-specific (e.g. Chrome 86 on Mac will render things differently to Chrome 86 on Windows 10) - so you must not depend on any particular user-agent stylesheet rules for your webpage to render correctly.
Could the overflow:hidden on the image inside be the cause of this bug?
I doubt it.
Why don't I see the issue on Chrome 79?
Because Chrome changed their user-agent styles for :focus and :focus-visible in Chrome 86.

Answer 2

Chromium was updated earlier this year with a fresh look.
You can read about the design updates here. This is one (of many factors) that can account for different user agent stylesheets.
However be aware that just because you see one thing, your colleagues see another that those are the only options.
My focus ring is only 1px and black, so that gives you an idea of how varied styles are (Chrome 86.0.4240.111 on Windows).
Accessibility
The more important part of your question is the part where you don't want to "interfere" with the browser default styles.
I don't really want to start adding new focus styles as I'd prefer to honour the browser's own settings in case the user has specified a focus style that works for them.
This just doesn't work in the real world. What if your website has a blue background? (Yes I am aware browsers are becoming smarter at accounting for this but in accessibility we need to support all the way back to IE8!). Also what if you have a complex widget that changes colour?
Style focus so that it is appropriate for the website, you want a contrast ratio of at least 3:1 on surrounding items. For really complex sites you may need a different focus ring colour depending on the background location to maintain this contrast ratio.
Style your focus rings!
#Dai made a valid point that this section was not very clear initially.
When I say to "style your focus rings" I mean to make them more usable and prominent than browser defaults.
Consider where they are placed on the page (their surroundings) to ensure sufficient colour contrast (as mentioned earlier 3:1 minimum with surroundings) and make sure they are clearly visible (they are called visible focus indicators for a reason).
As #Dai said, don't use this as an opportunity to try and flex your creative muscles, 20px wide magenta focus rings are not needed (and possibly might not be accessible). Keep them simple and consistent across the site.
Above all remember that focus indicators are there for accessibility.
I tend to advocate for an outline of 2px and an outline offset of 2px to ensure it is visible as the slight bit of white space around the item makes it easier to see.
button {
display: inline-flex;
width: 100px;
height: 100px;
align-items: center;
overflow: hidden;
position: relative;
margin-right: 8px;
margin-top: 8px;
border: 0;
cursor: pointer;
}
img {
margin: 0 auto;
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
position: absolute;
right: 50%;
top: 50%;
transform: translate(50%, -50%);
}
.better:focus{
outline: 2px solid #333;
outline-offset: 2px;
}
<h2>no image standard button</h2>
<button>
button with text
</button>
<h2>standard</h2>
<button>
<img src="https://picsum.photos/id/1062/100/50">
</button>
<h2>better</h2>
<button class="better">
<img src="https://picsum.photos/id/1062/100/50">
</button>
Oh and :focus-visible will be great when it gets traction but at the moment it doesn't have very good support so make sure you polyfill it if you use it.

Answer 3

The outline on focus if it is not set in CSS is actualy decided by the browser settings.
Here you can see already differents behave from a browser to another on windows and Mac. So I would not be surprise that this settings are changing from a version to another.