Twenty Twenty-One: Menu Item Focus Background only works on Chrome

[domainsupport]

The following css in style.css ...

.has-background-white .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
    background: rgba(0, 0, 0, 0.9);
}

... only has an effect in Chrome. It is ignored in Safari.

Many thanks,

Oliver

[domainsupport]

Sorry, this is linked ... the dotted border on site logo focus only shows on Chrome also ...

.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) img {
    outline: 2px dotted var(--wp--style--color--link, var(--global--color-primary));
}

Oliver

[poena]

Hi
I am not able to reproduce this on Safari version 15.5. How are you moving focus to the element?
Did you turn on "Press Tab to highlight each item" in the browser preference?

[domainsupport]

Hi,

It is when users click on a link, site owners were complaining that in Chrome the background flashed a different colour or a dotted line appeared (depending on the link type).

I didn't see what was going on at first because I mainly use Safari which didn't replicate the issue.

But when testing in Chrome I was able to replicate the problem, if you click on a matching element and hold the click you will see.

I've just tested on a client's site ​https://www.joansell.co.uk and the issue persists. If you click and hold the click on an item in the main nav, you will see that in Chrome you get a black background (which I assume is the intended behaviour) but in Safari there is no such change.

Oliver

[poena]

This is the behavior (a bug) of Safari compared to other browsers. I am not aware of a way to work around it, but if you know of a solution we can try implementing it.

[domainsupport]

Understood ... it would appear that this can be fixed with a polyfill ​https://itnext.io/fixing-focus-for-safari-b5916fef1064 but that seems a little excessive for the issue at hand.

As this is not a theme bug but a browser bug I guess this can be closed.

Oliver