css - How can I get around this Safari outline bug?

Question

When using Safari, Setting an outline in CSS causes issues for selectable elements where the outline dynamically changes. Some of the outline gets left behind on previously selected elements:

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

Here is a CodeSandbox that demonstrates the problem. In order to reproduce, it has to be run on Safari: https://codesandbox.io/s/nostalgic-shockley-luu3m?file=/src/App.js&resolutionWidth=320&resolutionHeight=675

Has anyone experienced this issue and been able to solve it?

Answer 1

That’s how it works for the safari browser but you can try changing the style for .box from outline to border

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

  border: 2px solid black;

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

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