Safari 11 css 错误的轮廓转换？

Question

在 Safari 11 中，鼠标悬停时轮廓宽度的过渡非常有问题，在以前的版本中它工作正常。有任何解决方法的提示吗？

html

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

css

.box{
  display: inline-block;
  margin: 5px;
  width: 50px;
  height: 50px;
  background-color: #fff;
  outline: 0 solid #000;
  transition: outline linear .2s, background-color .3s;

  &:hover{
    outline: 5px solid #000;
    background-color: red;
  }
}

https://jsfiddle.net/wj70onkw/

我在 OS High Sierra

上安装了 Safari 11.0.1

Answer 1

我遇到了同样的问题，下面是我的解决方法。

我创建了一个元素 ::before 带有轮廓的元素。我在 hover 上扩展了此元素，其过渡与带有轮廓的元素相同，瞧！似乎 safari 不明白大纲的特性是在框外扩展的，没有过渡他就没有时间捕捉这些信息。

这里是 link 我所说的例子： https://jsfiddle.net/1cdvy0vv/13/

希望对您有所帮助:)

Safari 11 css 错误的轮廓转换？

Safari 11 css buggy outline transition?

css

safari

transition

outline

macos-high-sierra

html

css