我怎样才能解决这个 Safari 大纲错误？

问题描述

使用 Safari 时，在 CSS 中设置轮廓会导致轮廓动态变化的可选元素出现问题。一些大纲被留在先前选定的元素上：

.Box {
  outline: 1px solid black;
}
.Box.selected {
  outline: 5px solid blue;
}

这是一个演示问题的 CodeSandBox。为了重现，它必须在 Safari 上运行：https://codesandbox.io/s/nostalgic-shockley-luu3m?file=/src/App.js&resolutionWidth=320&resolutionHeight=675

有没有人遇到过这个问题并且能够解决它？

解决方法

Safari 浏览器就是这样工作的，但您可以尝试将 .box 的样式从 outline 更改为 border

.box {
  height: 75px;
  width: 100px;

  border: 2px solid black;

  margin: 0px 5px;
  background: red;
}

.box.selected {
  outline: 5px solid blue;
}

outline safari