Safari 11 css buggy outline transition?

问题

In Safari 11 transition of outline width on hover is very buggy, it was working ok in previous versions. Any tips for workarounds?

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/

I have Safari 11.0.1 on OS High Sierra

回答1:

I got the same issue and here's how I resolved this.

I create an element ::before the element with the outline. I expended this element on hover with the same transition as the element with the outline and voilà! It seems that safari don't get that the outline propriety is expend outside the box and without the transition he don't have the time to catch this information.

Here is the link with an exemple of what I said: https://jsfiddle.net/1cdvy0vv/13/

Hope it's helpfull :)

来源：https://stackoverflow.com/questions/47381371/safari-11-css-buggy-outline-transition

标签

css