2

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 have similar problem with outline transition on Safari. Decided to remove transition completely.
    – Alan Bogu
    Feb 6, 2018 at 19:55

1 Answer 1

2

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 :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.