为什么使用Safari时Safari 13不会突出显示/渲染轮廓

Question

在下面的safari 13.0.5中的示例中，将焦点放在按钮上将不会显示轮廓，除非您强制重新绘制（例如，通过更改屏幕尺寸）

在其他浏览器上工作正常

在这种情况下，是否有任何技巧可以使轮廓显示在Safari中？

button {
  width: 10em;
  height: 3em;
  transition: all .25s ease-in-out;
}

button:focus {
  outline : 2px blue dashed;
}

<button type="button">Button</button>

有趣的是，轮廓的足够大的负偏移将绕过此错误。

不幸的是，这可能不适用于我所有情况，所以我希望有一个更好的答案。

button {
  width: 10em;
  height: 3em;
  transition: all .25s ease-in-out;
}

button:focus {
  outline : 2px blue dashed;
  outline-offset: -2px;
}

<button type="button">Button</button>

Answer 1

这是一个已知的野生动物园问题。问题是，您无法将按钮元素集中在野生动物园中。使用tabindex属性甚至是不可能的。

请参阅一些资源：resource 1resource 2

一个，也许可能的解决方案可能是这样的（将button元素更改为例如具有类的div）：

.button {
  width: 10em;
  height: 3em;
  transition: all .25s ease-in-out;
}

.button:focus {
  outline : 2px blue dashed;
  outline-offset: -2px;
}

<div class="button" tabindex="0">Button</div>

即使在此示例中，您也必须设置野生动物园的tabindex属性。