Mac Safari 15默认焦点状态不显示问题求助

问题现象 #

在Mac Safari 15中通过Tab键遍历页面元素时，浏览器默认的焦点状态不显示；但Chrome中操作正常，默认焦点样式能正常展示且元素可正常遍历。本次测试未自定义任何focus相关样式，期望使用浏览器原生焦点样式。

原因分析 #

Safari默认启用了自动隐藏焦点环特性：当用户通过鼠标交互后，Tab键导航时的焦点环会被隐藏，以此减少视觉干扰，但这会影响纯键盘导航的可用性。另外，Safari的原生焦点样式在部分元素上相对不明显，也可能导致看起来像未显示。

解决方案 #

以下几种方法可解决该问题：

方法1：使用:focus-visible强制键盘导航时显示焦点（推荐）

这是W3C标准伪类，专门针对键盘触发的焦点，Safari 15.4及以上版本支持。添加以下CSS：

/* 调用Safari原生焦点环样式，仅在键盘导航时显示 */
:focus-visible {
  outline: -webkit-focus-ring-color auto 5px;
}

方法2：全局重置焦点样式，覆盖自动隐藏行为

若需兼容更低版本Safari，可直接为可聚焦元素设置outline还原默认样式：

/* 还原所有可聚焦元素的浏览器默认焦点样式 */
*:focus {
  outline: revert;
}

outline: revert会让浏览器回到原生焦点样式，不会覆盖其他自定义样式。

方法3：JavaScript检测键盘导航实现精细控制

通过监听键盘/鼠标事件，动态控制焦点样式的显示：

document.addEventListener('keydown', (e) => {
  if (e.key === 'Tab') {
    document.body.classList.add('keyboard-navigation');
  }
});

document.addEventListener('mousedown', () => {
  document.body.classList.remove('keyboard-navigation');
});

配合CSS：

.keyboard-navigation :focus {
  outline: -webkit-focus-ring-color auto 5px;
}

测试代码 #

CSS

@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap');

* {
  line-height: calc(1ex / 0.32);
  font-family: 'Atkinson Hyperlegible', sans-serif;
}
@supports (font-size-adjust: 1;) {
    body {
        font-size-adjust: 0.5;
    }
}

.container {
  padding:24px;
}
.dark {
  background:#203240;
  color:white;
}
.dark a {
  color:white;
}
.light {
  background:white;
  color:#203240;
}

fieldset {
  margin-bottom:24px;
}

h1 {
    font-size: 2.5em;
    line-height: calc(1ex / 0.42);
    margin: calc(1ex / 0.42) 0;
}

h2 {
    font-size: 2em;
    line-height: calc(1ex / 0.42);
    margin: calc(1ex / 0.42) 0;
}

h3 {
    font-size: 1.75em;
    line-height: calc(1ex / 0.38);
    margin: calc(1ex / 0.38) 0;
}

h4 {
    font-size: 1.5em;
    line-height: calc(1ex / 0.37);
    margin: calc(1ex / 0.37) 0;
}

p {
    font-size: 1em;
    line-height: calc(1ex / 0.32);
    margin: calc(1ex / 0.32) 0;
}

input {
  font-size:1em;
}

/* 焦点样式修复 */
:focus-visible {
  outline: -webkit-focus-ring-color auto 5px;
}

HTML

<div class='light container'>
  <h1>焦点状态测试</h1>
  <h2>默认焦点状态</h2>
  <p>用于测试浏览器对元素默认焦点状态的处理方式</p>

  <form action="http://www.example.com/cgi/subscribe/" method="post">
    <fieldset>
    <legend>示例单选按钮</legend>
      <div>
        <input type="radio" name="format" id="someRadio" value="Some radio" checked>
        <label for="someRadio">选项1</label>
      </div>
      <div>
        <input type="radio" name="format" id="anotherRadio" value="Another radio">
        <label for="anotherRadio">选项2</label>
      </div>
    </fieldset>
    <fieldset>
    <legend>示例复选框</legend>
      <div>
        <input type="checkbox" name="example checkbox" id="check_1">
        <label for="check_1">示例复选框</label>
      </div>
    </fieldset>
    <input type="submit" value="提交" />
  </form>
</div>

内容的提问来源于stack exchange，提问作者Richard Stelmach