【问题标题】：Safari 11 css buggy outline transition?Safari 11 css buggy 轮廓过渡？
【发布时间】：2018-05-03 01:03:20
【问题描述】：

在 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

【问题讨论】：

我在 Safari 上的大纲转换有类似的问题。决定彻底删除过渡。

标签： css safari transition outline macos-high-sierra

【解决方案1】：

我遇到了同样的问题，这就是我解决这个问题的方法。

我创建了一个元素::before 带有轮廓的元素。我在hover 上使用了与带有轮廓的元素相同的过渡效果，瞧！ safari 似乎不明白大纲的适当性是在框外消耗的，如果没有过渡，他就没有时间捕捉这些信息。

这是我所说的示例的链接： https://jsfiddle.net/1cdvy0vv/13/

希望对你有帮助:)

【讨论】：