为什么在使用过渡时 Safari 13 paint/render 不突出焦点

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

这是一个已知的 Safari 浏览器问题。问题是，您无法在 safari 中聚焦按钮元素。 tabindex 属性甚至不可能。

查看一些资源： resource 1 resource 2

一个可能的解决方案可能是这样的（例如，将按钮元素更改为带有 class 的 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>

即使在此示例中，您也必须为 safari 设置 tabindex 属性..

Answer 2

自 Safari 13.1 起，此问题不再重现！

Why doesn't Safari 13 paint/render outline on focus when transition is used