Safari 11 css 越野车轮廓转换? [英] Safari 11 css buggy outline transition?

问题描述

在 Safari 11 中，悬停时轮廓宽度的过渡非常有问题，在以前的版本中运行正常.有什么解决方法的提示吗?

html

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

css

.box{显示:内联块；边距:5px；宽度:50px；高度:50px；背景色:#fff;大纲:0 实心 #000；过渡:轮廓线 .2s，背景颜色 .3s；&:悬停{轮廓:5px 实心 #000；背景颜色:红色；}}

https://jsfiddle.net/wj70onkw/

我在 OS High Sierra 上安装了 Safari 11.0.1

解决方案

我遇到了同样的问题，以下是我解决此问题的方法.

我创建了一个元素 ::before 带有轮廓的元素.我在 hover 上扩展了这个元素，使用与带有轮廓的元素相同的过渡，瞧！似乎 safari 没有意识到大纲的适当性超出了框框，如果没有过渡，他就没有时间捕捉这些信息.

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

希望对你有帮助:)

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

解决方案

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

这篇关于Safari 11 css 越野车轮廓转换?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！